Prévention des événements liés aux clics avec un glisser-déposer jQuery

Question

J'ai un des éléments de la page qui sont draggabe avec jQuery. Ces éléments ont cliquez sur l'événement qui accède à une autre page (ordinaire des liens par exemple).

Quelle est la meilleure façon de prévenir cliquez sur à partir de tir sur la suppression de ces éléments, tout en permettant le cliquant dans pas de glisser et de déposer de l'état?

J'ai ce problème avec sortable éléments, mais pense qu'il est bon d'avoir la solution générale de glisser-déposer.

J'ai résolu le problème pour moi. Après que l'on trouve la même solution existe pour Scriptaculous, mais peut-être que quelqu'un ait une meilleure façon d'y parvenir.

Answer 1

Une solution qui a bien fonctionné pour moi et qui n'exige pas de délai d'attente: (oui je suis un peu pédant ;-)

J'ajoute une classe de marqueur à l'élément au début du glissement, par exemple 'noclick'. Lorsque l'élément est supprimé, l'événement click est déclenché - plus précisément si le glissement se termine, il n'est en réalité pas nécessaire de le déposer sur une cible valide. Dans le gestionnaire de clics, je supprime la classe de marqueur si elle est présente, sinon le clic est traité normalement.

 $('your selector').draggable({
    start: function(event, ui) {
        $(this).addClass('noclick');
    }
});

$('your selector').click(function(event) {
    if ($(this).hasClass('noclick')) {
        $(this).removeClass('noclick');
    }
    else {
        // actual click event code
    }
});
 

Answer 2

La solution consiste à ajouter un gestionnaire de clics qui empêchera le clic de se propager au début du glissement. Et ensuite, supprimez ce gestionnaire après la suppression. La dernière action doit être un peu retardée pour que la prévention des clics fonctionne.

Solution pour triable:

 ...
.sortable({
...
        start: function(event, ui) {
            ui.item.bind("click.prevent",
                function(event) { event.preventDefault(); });
        },
        stop: function(event, ui) {
            setTimeout(function(){ui.item.unbind("click.prevent");}, 300);
        }
...
})
 

Solution pour draggable:

 ...
.draggable({
...
        start: function(event, ui) {
            ui.helper.bind("click.prevent",
                function(event) { event.preventDefault(); });
        },
        stop: function(event, ui) {
            setTimeout(function(){ui.helper.unbind("click.prevent");}, 300);
        }
...
})
 

Answer 3

J'aimerais ajouter à cela qu'il semble empêcher que l'événement click ne fonctionne que si l'événement click est défini APRÈS l'événement déplaçable ou pouvant être trié. Si le clic est ajouté en premier, il est activé par glisser.

Answer 4

J'ai constaté qu'en utilisant la fonction de clic standard jQuery:

$("#element").click(function(mouseEvent){ // click event });

fonctionne très bien dans l'interface utilisateur de jQuery. L'événement clic ne sera pas exécuté lors du glisser-déposer. :)

Answer 5

Je n'aime pas trop utiliser les minuteries ou prévenir, alors voici ce que j'ai fait:

 var el, dragged

el = $( '#some_element' );

el.on( 'mousedown', onMouseDown );
el.on( 'mouseup', onMouseUp );
el.draggable( { start: onStartDrag } );

onMouseDown = function( ) {
  dragged = false;
}

onMouseUp = function( ) {
  if( !dragged ) {
    console.log('no drag, normal click')
  }
}

onStartDrag = function( ) {
  dragged = true;
}
 

Solide comme le roc..