jquery ziehbar + sortierbar mit benutzerdefinierten html on drop event?

Überprüfen Sie diese DEMO Ссылка

Sie können das Element nach Wunsch anpassen.

Dies ist ein sehr einfaches Beispiel, sollte aber für verschiedene Fälle gelten. Ich nahm das Beispiel jQuery UI Draggable + Sortable und neben dem Widget .sortable() band ich das Widget .droppable() an die <ul id="sortable"> Element. Obwohl nicht die intelligenteste Methode im drop -Ereignis des DropPage-Widgets ist, überprüfe ich den Wert einer Variablen, um den Ursprung des verschobenen Elements zu identifizieren. (kommt es von der sortierbaren Liste oder von einem meiner Draggables?) Wenn es von einem der Draggables kommt, ändere ich den HTML davon zu, was ich will. Ansonsten bleibt es gleich (weil Sie nur die Sortierreihenfolge neu anordnen)

HTML

JS

jsfiddle zur Demonstration

Ein ziemlich langweiliges Beispiel, weil das neue HTML statisch ist. Aber nehmen wir an, Sie haben einen benutzerdefinierten Helfer für jedes ziehbare und das sollte Ihr neues HTML werden. Daher können Sie z.B. habe einige HTML-Fragmente in einem Array gespeichert und wähle den passenden Eintrag passend zum Index oder was auch immer. Das würde irgendwie so aussehen:

jsfiddle für das zweite Beispiel

Ziemlich sicher, dass Sie auch dasselbe Ergebnis erzielen könnten, indem Sie die Hilfsvariable umgehen und stattdessen ui.helper verwenden, aber ich konnte nicht herausfinden, wie ich den HTML-Teil davon erhalten kann. Wenn das nicht funktioniert, wie Sie es brauchen, informieren Sie mich einfach. Insgesamt denke ich, dass Sie meine Beispiele als Ausgangspunkt für verschiedene Ziele verwenden können, um das HTML des gelöschten Elements zu ändern.

Ich hatte ein ähnliches Problem, das ein weitaus komplizierteres Ergebnis erforderte. Mein System zog von einem div auf der linken Seite, das andere divs mit Formelementnamen und -IDs enthielt, die in ein sortierbares div auf der rechten Seite fielen, das ein Webformular werden sollte. Da ich das div auf der rechten Seite brauchte, um dem Inhalt eines Formulars ohne zusätzliches Markup sehr ähnlich zu sein, kam die Verwendung einer ungeordneten Liste nicht in Frage, es sei denn, ich wollte auf dem Weg in die Datenbank eine Menge "scrubbing" machen. Nein Danke. In meinem Beispiel, wenn ich aus der Liste auf der linken Seite ziehe, muss ich die ID des gezogenen Elements verwenden, um eine Reihe von Dingen über Ajax nachzuschauen, und dann eine Bezeichnung, ein Formularelement und eine Validierung in die Liste auf der links basierend auf den Ergebnissen dieses Ajax. Der Klarheit halber habe ich den Ajax aus meinem Beispiel entfernt.

Im Wesentlichen nehmen Sie also zwei nebeneinander liegende divs, die ziehbar und sortierbar mit Listenverbindung sind. Der Schlüssel ist, dass es Callback-Funktionen in Sortable gibt, die Sie verwenden müssen. Der Rückruf "Empfangen" wird nur ausgelöst, wenn der sortierbaren Liste ein neues Element hinzugefügt wird. Dies ist wichtig, weil Sie unterscheiden müssen, damit Ihre Änderung nicht auch bei der Sortierung auftritt. Sie können jedoch nicht nur "receive" verwenden, denn wenn Sie versuchen, den HTML-Code in diesem Callback zu manipulieren, wirken Sie auf die Liste, aus der Sie ziehen, nicht auf die Liste, auf die Sie ziehen. Um zu verfolgen, ob es eine Liste hinzufügen oder ein Ziehen ist, setze ich eine Variable namens "newlement" in $ .data auf 1, wenn es eine Liste hinzufügen, die ich dann im Update-Callback überprüfe, um zu sehen, ob ich den gezogenen HTML-Code ausführen soll oder nicht. In meinem Fall möchte ich nichts mit einem Element tun, das gezogen wird.

Also, der HTML:

Und die jQuery:

});

Sehen Sie sich die Dokumentation zu sortierbar an. Sie können das Element ui verwenden, um das HTML des abgelegten Objekts zu ändern

Ссылка

Hier sehen Sie auch Beispiele für verbundene Listen und die Ereignisse, die ausgelöst werden

Ссылка

Mit dem Update-Event ändern Sie den HTML-Code des Elements.