4

J'ai quelques éléments sur une page qui sont déplaçables. Ces mêmes éléments ont un événement click qui navigue vers une autre page. J'essaie de déterminer la meilleure façon d'empêcher l'événement click de se déclencher si l'utilisateur est en train de glisser mais autorise quand même l'événement click s'il ne fait pas glisser. Quelqu'un at-il des idées de la meilleure façon d'accomplir cela?Prévention de l'événement de clic JavaScript avec le script de glisser-déposer

Répondre

1

Je résolu ce problème en utilisant quelque chose comme ce qui suit:

new Draggable('id', { 
    onStart: function() { 
     dPhoto = $('id'); 
     Event.stopObserving('id', 'click'); 
    }, 
    onEnd : function() { 
     setTimeout("Event.observe('id', 'click', function() { location.href = 'url'; });", 500); 
    }, 
    revert: true 
}); 
+1

Pourriez-vous réellement enregistrer l'événement click pour le rattacher ensuite? – mercutio

0

Quelque chose comme ce qui suit pourrait faire l'affaire (et empêcher l'événement de clic à Fired Up)

new Draggable('tag', 
    { 
     revert:function() 
     { 
      $('tag').onclick = function(){return false;}; 
      setTimeout('$(\'tag\').onclick = function(){return true;}','500'); 
      return true; 
     } 
    } 
); 
+0

Merci, mais cela n'a pas fonctionné tout à fait. Il empêche l'événement click de se produire même après le timeout. On dirait qu'il devrait y avoir une solution plus propre. – digitalsanctum

+0

Je suis d'accord. Je valais le coup. – VonC

1
var click_func; 
function onDragStart(drgObj,mouseEvent){ 
    click_func = mouseEvent.target.onclick; 

    mouseEvent.target.onclick = function(e){ 
     mouseEvent.target.onclick = click_func; 
     return false; 
    } 
} 
0

Vous pouvez également le faire d'une autre manière. Sur votre startDrag, vous arrêtez d'observer l'objet. Ensuite, vous observez à nouveau le clic qui mène à une fonction enddrag qui recrée le premier Eventhandler.

function onDragStart() { 
    Event.stopObserving(this.OBJECT,'click'); 
    Event.observe(this.OBJECT,'click',this.onDragEnd.bindAsEventListener(this)); 
} 

function onDragEnd() { 
    Event.stopObserving(this.OBJECT,'click'); 
    Event.observe(this.OBJECT,'click',this.PREVIOUSFUNCTION.bindAsEventListener(this)); 
} 

Ce attraperez l'événement de clic restant qui est encore actif après la EndDrag pour recréer tout le gestionnaire d'origine. J'espère que cela aide quelqu'un là-bas :)