Verhindern eines Klickereignisses durch Ziehen und Ablegen von jQuery

Ich habe Elemente auf der Seite, die mit jQuery gezogen werden können. Haben diese Elemente ein Klickereignis, das zu einer anderen Seite navigiert (z. B. normale Links)?

Was ist der beste Weg, um zu verhindern, dass beim Löschen eines solchen Elements ein Klick ausgelöst wird, während das Klicken nicht per Drag & Drop ausgeführt wird?

Ich habe dieses Problem mit sortierbaren Elementen, denke aber, dass es gut ist, eine Lösung für allgemeines Drag & Drop zu haben.

Ich habe das Problem für mich gelöst. Danach stellte ich fest, dass es für Scriptaculous dieselbe Lösung gibt , aber vielleicht hat jemand einen besseren Weg, dies zu erreichen.

Eine Lösung, die für mich gut funktioniert hat und keine Auszeit erfordert: (Ja, ich bin ein bisschen pedantisch ;-)

Ich füge dem Element eine Markierungsklasse hinzu, wenn das Ziehen beginnt, z. B. 'noclick'. Wenn das Element gelöscht wird, wird das Klickereignis ausgelöst - genauer gesagt, wenn das Ziehen endet, muss es nicht auf ein gültiges Ziel abgelegt werden. Im Klick-Handler entferne ich die Markierungsklasse, falls vorhanden, andernfalls wird der Klick normal behandelt.

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

Die Lösung besteht darin, einen Klick-Handler hinzuzufügen, der verhindert, dass sich der Klick beim Start des Ziehens ausbreitet. Entfernen Sie dann diesen Handler, nachdem das Ablegen ausgeführt wurde. Die letzte Aktion sollte etwas verzögert werden, damit die Klickverhinderung funktioniert.

Lösung zum Sortieren:

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

Lösung für 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);
        }
...
})

Ich hatte das gleiche Problem und versuchte mehrere Ansätze und keiner funktionierte für mich.

Lösung 1

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

tut nichts für mich Das Element wird angeklickt, nachdem das Ziehen abgeschlossen ist.

Lösung 2 (von Tom de Boer)

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

Dies funktioniert einwandfrei, schlägt jedoch in einem Fall fehl - als ich auf Vollbild ging, klicken Sie auf:

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

Lösung 3 (von 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);
        }
})

Das funktioniert bei mir nicht.

Lösung 4 - die einzige, die gut funktioniert hat

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

Ja, das ist es - die richtige Reihenfolge macht den Trick - zuerst müssen Sie draggable () binden und dann click (). Selbst wenn ich den Vollbild-Umschaltcode in click () eingefügt habe, wurde er beim Ziehen nicht in den Vollbildmodus verschoben. Perfekt für mich!

Ich möchte hinzufügen, dass das Klickereignis anscheinend nur funktioniert, wenn das Klickereignis NACH dem ziehbaren oder sortierbaren Ereignis definiert ist. Wenn der Klick zuerst hinzugefügt wird, wird er beim Ziehen aktiviert.

Ich mag es nicht wirklich, Timer zu verwenden oder zu verhindern. Also habe ich Folgendes getan:

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

Rocksolid ..

lex82's version aber für .sortable ()

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

und Sie brauchen möglicherweise nur:

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

und hier ist, was ich für den Umschalter verwende:

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

Eine mögliche Alternative für Sashas Antwort, ohne die Standardeinstellung zu verhindern:

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 der jQuery-Benutzeroberfläche erhalten Elemente, die gezogen werden, die Klasse "ui-draggable-dragging".
Wir können diese Klasse daher verwenden, um zu bestimmen, ob geklickt werden soll oder nicht. Verzögern Sie einfach das Ereignis.
Sie müssen die Rückruffunktionen "Start" oder "Stop" nicht verwenden. Führen Sie einfach Folgendes aus:

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

Dies wird eher durch "Mouseup" als durch "Mousedown" oder "Click" ausgelöst - es gibt also eine leichte Verzögerung, die möglicherweise nicht perfekt ist -, aber es ist einfacher als andere hier vorgeschlagene Lösungen.

Nachdem ich dies und einige Themen durchgelesen hatte, war dies die Lösung, mit der ich mich entschieden habe.

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

In meinem Fall hat es so funktioniert:

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

Haben Sie versucht, den Link mit event.preventDefault () zu deaktivieren? im Startereignis und erneutes Aktivieren im Drag-Stop-Ereignis oder Drop-Ereignis mit Unbind?

Nur eine kleine Falte, um die oben gegebenen Antworten zu ergänzen. Ich musste ein div, das ein SalesForce-Element enthält, ziehbar machen, aber das SalesForce-Element verfügt über eine On-Click-Aktion, die im HTML-Code durch ein VisualForce-Gobbledigook definiert ist.

Offensichtlich verstößt dies gegen die Regel "Klickaktion nach der Ziehaktion definieren". Als Problemumgehung habe ich die Aktion des SalesForce-Elements neu definiert, die "onDblClick" ausgelöst werden soll, und diesen Code für das Container-Div verwendet:

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

Das Klickereignis der Eltern verbirgt im Wesentlichen die Notwendigkeit, auf das untergeordnete Element zu doppelklicken, wodurch die Benutzererfahrung erhalten bleibt.

Ich habe es so versucht:

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

});

Für mich half es, den Helfer im Optionsobjekt zu übergeben als:

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

Das Ziehen des gezogenen dom-Elements scheint das Sprudeln des Ereignisses verhindert zu haben. Ich konnte es mit keinem Ereignis vermeiden. Propagation, Sprudeln usw. Dies war die einzige funktionierende Lösung für mich.

Die Onmousedown- und Onmouseup-Events haben in einem meiner kleineren Projekte funktioniert.

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();" />

Ja, ich weiß. Nicht der sauberste Weg, aber Sie bekommen die Idee.

die einfachste und robusteste Lösung? Erstellen Sie einfach ein transparentes Element über Ihrem Draggable.

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