Prevenzione dell'evento clic con jQuery drag and drop

Ho elementi sulla pagina che possono essere trascinati con jQuery. Questi elementi hanno un evento clic che naviga in un'altra pagina (link ordinari per esempio).

Qual è il modo migliore per impedire che il clic si attivi quando viene rilasciato tale elemento, consentendo allo stesso tempo di non trascinare e rilasciare il clic?

Ho questo problema con gli elementi ordinabili ma penso che sia utile avere una soluzione per il trascinamento generale.

Ho risolto il problema da solo. Dopo di che ho scoperto che esiste la stessa soluzione per Scriptaculous , ma forse qualcuno ha un modo migliore per ottenerlo.

Una soluzione che ha funzionato bene per me e che non richiede timeout: (sì, sono un po 'pedante ;-)

Aggiungo una classe marker all'elemento quando inizia il trascinamento, ad esempio "noclick". Quando l'elemento viene rilasciato, viene attivato l'evento clic - più precisamente se il trascinamento termina, in realtà non deve essere rilasciato su un target valido. Nel gestore dei clic, rimuovo la classe marker se presente, altrimenti il ​​clic viene gestito normalmente.

$('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
    }
});

La soluzione è aggiungere un gestore di clic che impedirà la propagazione del clic all'avvio del trascinamento. Quindi rimuovere quel gestore dopo aver eseguito il rilascio. L'ultima azione dovrebbe essere ritardata un po 'affinché la prevenzione dei clic funzioni.

Soluzione per ordinabile:

...
.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);
        }
...
})

Soluzione per trascinabile:

...
.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);
        }
...
})

Ho avuto lo stesso problema e ho provato più approcci e nessuno ha funzionato per me.

Soluzione 1

$('.item').click(function(e)
{            
    if ( $(this).is('.ui-draggable-dragging') ) return false;
});  

non fa niente per me. Si fa clic sull'elemento al termine del trascinamento.

Soluzione 2 (di Tom de Boer)

$('.item').draggable(
{   
    stop: function(event, ui) 
    {
         $( event.originalEvent.target).one('click', function(e){ e.stopImmediatePropagation(); } );
    }
});

Funziona bene ma in un caso non funziona, quando stavo facendo clic a schermo intero:

var body = $('body')[0];     
req = body.requestFullScreen || body.webkitRequestFullScreen || body.mozRequestFullScreen;
req.call(body); 

Soluzione 3 (di Sasha Yanovets)

 $('.item').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);
        }
})

Questo non funziona per me.

Soluzione 4 - l'unica che ha funzionato bene

$('.item').draggable(
{   
});
$('.item').click(function(e)
{  
});

Sì, questo è tutto, l'ordine corretto fa il trucco: prima devi associare trascinabile () quindi fare clic su (). Anche quando ho inserito il codice di commutazione a schermo intero nell'evento click (), non è ancora andato a schermo intero durante il trascinamento. Perfetto per me!

Vorrei aggiungere a questo che sembra che prevenire l'evento clic funzioni solo se l'evento clic è definito DOPO l'evento trascinabile o ordinabile. Se il clic viene aggiunto per primo, viene attivato durante il trascinamento.

Non mi piace molto usare timer o prevenire, quindi quello che ho fatto è questo:

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;
}

Roccia solida..

versione di lex82 ma per .sortable ()

 start: function(event, ui){
 ui.item.find('.ui-widget-header').addClass('noclick');
 },

e potresti aver bisogno solo di:

 start: function(event, ui){
 ui.item.addClass('noclick');
 },

ed ecco cosa sto usando per l'interruttore:

$("#datasign-widgets .ui-widget-header").click(function(){
if ($(this).hasClass('noclick')) {
$(this).removeClass('noclick');

}
else {
$(this).next().slideToggle();
$(this).find('.ui-icon').toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
}
});

Una possibile alternativa alla risposta di Sasha senza impedire il default:

var tmp_handler;
.sortable({
        start : function(event,ui){
            tmp_handler = ui.item.data("events").click[0].handler;
            ui.item.off();
        },
        stop : function(event,ui){
            setTimeout(function(){ui.item.on("click", tmp_handler)}, 300);
        },

In jQuery UI, agli elementi trascinati viene assegnata la classe "ui-trascinabile-trascinamento".
Possiamo quindi utilizzare questa classe per determinare se fare clic o meno, ritardare semplicemente l'evento.
Non è necessario utilizzare le funzioni di callback "start" o "stop", basta fare:

$('#foo').on('mouseup', function () {
    if (! $(this).hasClass('ui-draggable-dragging')) {
        // your click function
    }
});

Questo viene attivato da "mouseup", piuttosto che "mousedown" o "clic" - quindi c'è un leggero ritardo, potrebbe non essere perfetto - ma è più facile di altre soluzioni suggerite qui.

Dopo aver letto questo e alcuni thread, questa è stata la soluzione con cui sono andato.

var dragging = false;
$("#sortable").mouseover(function() {
    $(this).parent().sortable({
        start: function(event, ui) {
            dragging = true;
        },
        stop: function(event, ui) {
            // Update Code here
        }
    })
});
$("#sortable").click(function(mouseEvent){
    if (!dragging) {
        alert($(this).attr("id"));
    } else {
        dragging = false;
    }
});

Nel mio caso ha funzionato così:

$('#draggable').draggable({
  start: function(event, ui) {
    $(event.toElement).one('click', function(e) { e.stopPropagation(); });
  }
});

Hai provato a disabilitare il collegamento usando event.preventDefault (); nell'evento di inizio e riattivarlo nell'evento di interruzione del trascinamento o evento di rilascio utilizzando unbind?

Solo una piccola ruga da aggiungere alle risposte fornite sopra. Ho dovuto creare un div che contiene un elemento SalesForce trascinabile, ma l'elemento SalesForce ha un'azione onclick definita nell'html tramite alcuni gobbledigook di VisualForce.

Ovviamente questo viola la regola "definire l'azione di clic dopo l'azione di trascinamento", quindi come soluzione alternativa ho ridefinito l'azione dell'elemento SalesForce da attivare "onDblClick" e ho utilizzato questo codice per il div contenitore:

$(this).draggable({
        zIndex: 999,
        revert: true,
        revertDuration: 0,
        start: function(event, ui) {
                   $(this).addClass('noclick');
                }
});

$(this).click(function(){
    if( $(this).hasClass('noclick'))
    {
        $(this).removeClass('noclick');
    }
    else
    {
        $(this).children(":first").trigger('dblclick');
    }
});

L'evento clic del genitore nasconde essenzialmente la necessità di fare doppio clic sull'elemento figlio, lasciando intatta l'esperienza dell'utente.

Ho provato in questo modo:

var dragging = true; 

$(this).click(function(){
  if(!dragging){
    do str...
  }
});

$(this).draggable({
  start: function(event, ui) {
      dragging = true;
  },

  stop: function(event, ui) {
      setTimeout(function(){dragging = false;}, 300);
  }

});

per me ha aiutato a passare l'helper nell'oggetto opzioni come:

.sortable({
   helper : 'clone', 
   start:function(), 
   stop:function(),
   .....
});

Sembra che la clonazione dell'elemento dom trascinato abbia impedito il bubbling dell'evento. Non ho potuto evitarlo con qualsiasi eventPropagation, bubbling, ecc. Questa era l'unica soluzione funzionante per me.

Gli eventi onmousedown e onmouseup hanno funzionato in uno dei miei progetti più piccoli.

var mousePos = [0,0];
function startClick()
{
    mousePos = [event.clientX,event.clientY];
}
        
function endClick()
{
    if ( event.clientX != mousePos[0] && event.clientY != mousePos[1] )
    {
        alert( "DRAG CLICK" );
    }
    else
    {
        alert( "CLICK" );
    }
}

<img src=".." onmousedown="startClick();" onmouseup="endClick();" />

Si, lo so. Non è il modo più pulito, ma hai l'idea.

la soluzione più semplice e robusta? basta creare un elemento trasparente sul tuo trascinabile.

.click-passthrough {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: transparent;
}

element.draggable({        
        start: function () {

        },
        drag: function(event, ui) {
            // important! if create the 'cover' in start, then you will not see click events at all
                  if (!element.find('.click-passthrough').length) {
                      element.append("<div class='click-passthrough'></div>");
                  }
        },
        stop: function() {
          // remove the cover
          element.find('.click-passthrough').remove();
        }
    });