Verwendung von Drag and Drop in Websites?

Question

Da ich nun bessere Webanwendungen entwickeln möchte als die grundlegenden php- und javascriptbasierten, die ich derzeit erstelle, würde ich gerne wissen, wie Webentwickler einige der erstaunlichen Websites erstellen, die ich in den letzten Jahren genutzt habe.

Auf einigen der Websites, die ich besuche, kann man beispielsweise Elemente aus einer Palette auf die Webseite ziehen und ablegen. Ich denke dabei vor allem an einige der Online-Diagrammwerkzeuge, die ich gesehen habe. Wie machen sie das, denn ich bin derzeit verwirrt.

Ich würde gerne mit der Erstellung dieser Art von Websites beginnen und habe derzeit keine Ahnung, wie ich vorgehen soll. Ich möchte zunächst einige kleine Test-Websites erstellen, die nur eine sehr einfache Drag-and-Drop-Nutzung ermöglichen.

Wenn mir jemand Links zu Tutorials oder Bibliotheken mit dieser Funktion nennen könnte, wäre ich sehr dankbar.

Zum Wohl.

Answer 1

Kann mit der jquery UI durchgeführt werden

Ziehbar

Absetzbar

Answer 2

Die beste und zukunftssicherste (in Bezug auf die Unempfindlichkeit gegenüber Browseränderungen und -aktualisierungen) Methode zur Implementierung von Drag/Drop-Funktionen ist die Verwendung echter Rich-Client-Technologie (RIA) wie Adobe Flex, Silverlight oder JavaFX.

Answer 3

Ich denke, Sie sollten die Entwicklung in GWT, die im Grunde eine Java-basierte Wrapper für Javascript ist. Es hat eine Menge Unterstützung von der Community und eine vollständige Drag & Drop-Unterstützung ist in Form einer Bibliothek verfügbar - http://code.google.com/p/gwt-dnd/

Da GWT in Java kodiert ist, ist es nicht wirklich ein neues Territorium, in das man sich hineinwagen kann, aber Kenntnisse in Javascript, CSS, HTML sind für den Aufbau einer robusten GWT-Anwendung von großer Bedeutung. Außerdem können Sie Ihren Code in Eclipse genau wie Java-Code debuggen.

Answer 4

Was ein einfaches Ziehen und Ablegen angeht, könnten Sie etwas wie Sie sagten mit einer Palette und einem Dialog machen, der die Farbe basierend auf dem Ablegen ändert.

Ich empfehle die jQuery Framework, da es sehr einfach zu bedienen ist und eine große API .

Die Schritte für den Test selbst sind recht einfach:

Haben Sie eine Palette mit den Farben: [ ][ ][ ][ ][ ] Dies können Tabellenzellen sein ( <td> ), die Sie anklicken und "ziehen" können.

Sie könnten Tabellen erstellen, und wenn Sie auf eine der Tabellen klicken, verwenden Sie jQuery, um die Hintergrundfarbe zu erhalten. Wenn man dann auf die Tabelle klickt <td> weisen Sie die Farbe einer Variablen zu.

Sie könnten ein halbtransparentes <div> die der Maus beim Ziehen folgt.

Einstellen mouseup Hörer auf dem Ziel <div> (derjenige, der die Farbe ändern würde) und lassen Sie jQuery den Hintergrund der <div> auf die Farbe in der Variablen.

Edit: Es gibt ein kleines Problem mit der "Textauswahl", wenn Sie etwas ziehen. Ein Fix kann hier gefunden werden: Wie kann man die Hervorhebung der Textauswahl mit CSS deaktivieren?

Answer 5

jQuery ist leicht zu erlernen (aber ich bin mir nicht 100%ig sicher, dass es DnD kann). Ich persönlich mag MochiKit das über hervorragende Drag-and-Drop-Funktionen verfügt, und Dojo ist ebenfalls sehr gut (und hat einige ausgefallene Widgets).