JavaScript: Maus auf Links ziehen

Question

Ich versuche, eine Kalender-Seite zu erstellen, auf die Sie klicken und ziehen können, um mehrere Kalendertage gleichzeitig auszuwählen. Alles funktioniert gut in Google Chrome, aber in Firefox, wenn ich versuche, zu ziehen, scheitert es. Der Grund dafür ist, dass jeder Kalendertag in einem Link (<a></a>) enthalten ist. Wenn Sie versuchen, Links in Firefox zu ziehen, wird eine eigene Aktion ausgeführt. Kann ich das irgendwie verhindern oder umgehen?

Answer 1

ich in dieser Ausgabe lief, sah Thread. In meinem Fall behandle ich die Mausereignisse der unteren Ebene, nicht klicken. Ich habe festgestellt, dass ich bei jQuerys mousedown (http://docs.jquery.com/Events/mousedown#fn) das spezielle Verhalten von Firefox unterdrücken konnte, indem ich event.preventDefault (http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29) auf das eingehende Mausereignis aufruft.

Ich habe es auf anderen Ereignishandlern aufgerufen, aber ich vermute, dass nur mousedown() ausreicht, um Browser davon abzuhalten, ihr benutzerdefiniertes Ziehverhalten zu tun.

Answer 2

Wenn Sie jQuery verwenden, gehen Sie folgendermaßen vor. $ ("a") .click (function() { return false; });

return false verhindert die Standardeinstellungen des Browsers. hinzufügen

Answer 3

Für IE können Sie auch:

// prevent text selection in IE 
    document.onselectstart = function() { return false; }; 
    // prevent IE from trying to drag an element 
    target.ondragstart = function() { return false; }; 

Answer 4

Hmmm, vielleicht ist es irgendwie spät dafür. Aber wenn du dieses Thema nicht gestellt hättest, hätte ich das vielleicht nie gelöst. Ich hatte das gleiche Problem und so begann ich in meinem Kopf zu zeichnen, wie die Ereignisse funktionieren. Die Umgebung ist dies:

unsere ziehbar Artikel:

<div id="sender"><a href="http://www.ourlinktodestination.com">my title</a></div> 

unsere abwerfbaren Artikel:

<table><tr><td class="celdarec">&nbsp;</td></tr><table> 

hier So ist es:

jQuery(document).ready(function($) { 
    var globalEle, globalLink; 

    $(".sender").draggable({ 
     revert:'invalid', 
     start:function(event, ui){ 
      globalEle = $(this); 
      globalLink = $(this).find("a").attr("href"); 
     }, 
     stop:function(event, ui){ 
      globalEle = null; 
     } 
    }); 

    $("#tablareceptora .celdarec").droppable({ 
     accept: '.sender', 
     hoverClass: 'drop_hover', 
     drop: function(event, ui){ 
      $(this).html(globalEle.html()); 
      $(this).find("a").attr("href", globalLink); 
      globalEle.remove(); 
     }, 
     tolerance: 'pointer' 
    }); 

    $(".sender").delegate("a", "mouseup", function(e){ 
     e.target.href ="javascript:void(0)"; 
    }); 
}); 

(Ich bin mit jQuery und jQuery ui aus dem Wordpress-Ordner, deshalb verwendet die erste Zeile "jQuery" -Anweisung statt o f "$" und lege diesen zuletzt auf den Handler als Parameter).

1. Wenn Sie ziehen Sie sich, wird die event.target.href erreicht und mit unserem Link gefüllt. Aus Gründen, die ich (noch) nicht erklären kann, selbst wenn Sie preventDefault verwenden, wird beim mouseup -Ereignis mit delegate-Anweisung für das Element, das an den absetzbaren Bereich übergeben wird, die Verknüpfung immer noch an es weitergeleitet.

2. Wir gehen davon aus, dass das Ereignis auf die Klickaktion reagiert ... "klick" und dass heißt: Maus runter und Maus hoch ... aber hier ist das Ding: Ich habe auf die ziehbare "Start" -Option gesetzt dies:

   globalLink = $(this).find("a").attr("href"); 
   

   Globallink ist eine deklarierte Variable extern (am Anfang des Skripts), so dass, wenn Sie ziehen beginnen, wird der Link zu diesen variablen gesendet. Dann müssen Sie auf dem dragbaren Element (in meinem Fall eine Klasse namens sender) die delegate-Anweisung verwenden, nach einem "a" -Zeichen auf dem "mouseup" -Ereignis suchen und "#" auf das Ziel setzen.href Einstellung der Veranstaltung übergeben:

   $(".sender").delegate("a", "mouseup", function(e){ 
       e.target.href = "javascript:void(0)"; 
   }); 
   

   Dies wird jedes Verhalten vermeiden, die über die prevent Aussage arbeitet (was ich nehme an, dass von dem Ereignis geschieht, die diese Einschränkung zu umgehen).

3. Zum Schluss können Sie den Link auf das "a" -Zelassenfeld ziehen. Wenn wir jedoch nur auf die Zelle gehen und sie dort ablegen, wenn Sie Firebug verwenden und den Code überprüfen, hat das href-Attribut den "javascript: void (0)", der beim mouseup-Ereignis übergeben wurde. Dies kann viele Dinge beantworten, z. B. wie wird das Redirect-Verhalten in der Drop-Aktion ausgelöst. Bedeutet, dass jquery ui über das defaultPrevent-Objekt arbeitet, da das Redirect-Verhalten des drop-fähigen Ereignisses ein programmiertes Verhalten ist. Also das ist, warum ich den Link auf der externen Variablen gespeichert, so kann ich es auf dem Drop-Ereignis in der abwerfbaren Einstellung neu zuweisen:

   $(this).find("a").attr("href", globalLink); 
   

Hope this jeden anderen Kerl oder Mädchen, das in der gleichen ist helfen kann Situation

Gute Stimmung für alle!