Trigger mit der Maus in jQuery UI

Mithilfe von jQuery 1.2 an.x und jQuery UI 1.5.x, war man in der Lage auszulösen, ziehen Sie manuell wie folgt:

jQuery("#myDiv").mousedown(function(ev) {
target = jQuery(ev.target);
if (target.hasClass("drag-me")) {
    target.draggable({
        helper: "clone",
        start: function()
        {
            console.log("drag start");
        },
        stop: function()
        {
            jQuery(this).draggable("destroy");
        }
    }).trigger("mousedown.draggable", [ev]);
} });

Es wird angewendet, um den folgenden HTML-Code:

<div id="myDiv">
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
</div>

War es eine praktische Möglichkeit, um Sie zu bewegen, um Elemente innerhalb eines Containers, dass seine Kinder dynamisch verändert werden. Ich nenne es gerne "drag delegation".

Doch mit der Veröffentlichung von jQuery 1.3.x & jQuery 1.6+, das script oben funktioniert nicht mehr. Mit jQuery 1.3.2 & jQuery-UI-1.7.1 gibt eine Fehlermeldung "too much recursion".

Wie kann ich den trigger manuell ziehen? Irgendwelche Vorschläge?

InformationsquelleAutor Raybiez | 2009-06-05

Oben genannten Antworten scheinen zu kompliziert.

$('.nonDraggableObjectWhichTriggersDrag').mousedown(function(e) {
   $('.draggableObject').trigger(e);
});

InformationsquelleAutor John Milmine

Ich, wenn Sie nicht mit jQuery 1.4 (und somit nicht über die delegate () - Methode), gibt es eine andere Lösung.

was müssen Sie tun, um zu stoppen die recurssion auftreten, ist call stopPropagate() auf das mousedown-Ereignisse für alle Elemente:

$('drag-me').mousedown(function(ev){
  ev.stopPropagation();
});

Ändern Sie auch Ihren code wie folgt aus (beachten Sie die stopPropagation () - Aufruf an der Unterseite):

jQuery("#myDiv").mousedown(function(ev) {
target = jQuery(ev.target);
if (target.hasClass("drag-me")) {
        target.draggable({
                helper: "clone",
                start: function()
                {
                        console.log("drag start");
                },
                stop: function()
                {
                        jQuery(this).draggable("destroy");
                }
        }).trigger("mousedown.draggable", [ev]);
        ev.stopPropagation()
    }
});

Dieses Problem beheben sollte, bis Ihre unendliche recurssion. (zumindest kam es für mich in einer ähnlichen situation)

InformationsquelleAutor nivcaner

3

Es stellt sich heraus viel einfacher, als man erwarten würde. Blick auf die .trigger () - Methode in der Dokumentation nicht erwähnt ist die Tatsache, dass man auch liefern Sie das original-event als argument und nicht nur eine string-Darstellung des event-Typs.

Damit kann man erreichen, Delegierte ziehen effizienter zu gestalten, zum Beispiel so:
```
$("ul#dynamiclist").delegate("li", "mousedown", function(event) {
    $(this).draggable({
            helper: "clone",
            cursorAt: { left: 5, top: -5 },
            cursor: "move",
            stop: function() {
                    $(this).draggable("destroy");
            }
    }); });
```
Die ideale Lösung gewesen wäre, für die UI-Bibliothek, die einige Methode, um diese Art der delegation nativ für dynamische Elemente....

Beachten Sie, dass dies zutreffend ist jQuery 1.4.2 & jQuery-UI-1.7.2

InformationsquelleAutor Raybiez
1

Wenn du posten könntest eine ganze code-Beispiel (mit html & entsprechenden script-tags mit arbeitsfreien Versionen), ich konnte helfen, wahrscheinlich darauf hinweisen, was falsch und/oder zu überprüfen das problem ....

Allerdings bin ich mir nicht sicher, ob Sie übergeben möchten ein array mit 1 Objekt [ev] als zweiter parameter der Auslöser nennen.

Den Dokumentation sagt: "Schließlich, können Sie ein Objekt-literal mit den Daten. Es wird kopiert, um eine echte jQuery.Event-Objekt. Beachten Sie, dass die Angabe eines type-Attributs in diesem Fall."

Können Sie überprüfen, dass es (sollte|gearbeitet haben), wie du geschrieben hast und/oder möglicherweise fügen Sie etwas mehr code oder die URL zu der entsprechenden Seite? Ich würde gerne zu einem anderen Blick auf Sie.

Hoffe, das hilft. 🙂

Edit: Unter einem anderen Blick auf Sie. Es tut genau das, was Sie Fragen, es zu. Auf das mousedown-Ereignis, Sie einige Dinge tun, und dann am Ende durch auslösen eines anderen mousedown-Ereignis wird einige Dinge tun und verursachen dann ein anderes mouse-down-event und so weiter ... und so ...

Du erstellt hast, eine Endlosschleife.

Warum nicht einfach die entsprechenden divs alle ziehbar, wenn die Seite geladen wird, anstatt, wenn Sie zuerst geklickt? Wäre das nicht das problem vermeiden?

Haben auch einen Blick auf dieser Beitrag, und ich wäre sehr daran interessiert zu sehen, einige code, der verwendet wird, um zu arbeiten. Wie geschrieben, ich bin mir nicht sicher, ich verstehe die Reihenfolge, wie der code emulieren müsste eine komplette "drag" event - bestehend aus mousedown, mousemove und mouseUp-events. Lassen Sie es mich wissen. Danke!

Ich habe die HTML. Wie ich in der Frage genannten, es war in früheren Versionen von jQuery & jQuery UI (1.2.6 & 1.5.2 beziehungsweise). Ich schrieb einen blog-Artikel zu dem Thema (neilcraig.blogspot.com/2008/12/...). Es bedurfte einer kleinen Korrektur auf die jQuery-UI-source, aber es hat funktioniert. Ich habe versucht, tiggering das mousedown-Ereignis verwenden .trigger(ev), .trigger("mousedown"), sowie .trigger("mousedown.draggable"), aber leider. Vielen Dank für Ihre Hilfe though.

InformationsquelleAutor Keith Bentrup
0

die anderen Antworten nicht für mich arbeiten, ich habe mit jquery ui simulieren plugin

https://github.com/jquery/jquery-ui/blob/9e8e339648901899827a58e5bf919f7dda03b88e/tests/jquery.simulate.js
```
$("#myElement").simulate('drag');
```
InformationsquelleAutor dav

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.