SVG/Anwendung und Praxis/Drag & Drop

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Sowohl die HTML5 Drag & Drop-API als auch die Umsetzung von jQuery funktionieren nicht mit SVG-Elementen. Es gibt jedoch einige Frameworks wie d3.js die diese Funktionalität nachrüsten.

[Bearbeiten] Drag und Drop mit d3.js

Das Framework d3.js ist eine der weitverbreitesten Ergänzungen zur Datenvisualisierung.[1]

Mit seiner Hilfe können Sie mit wenigen Zeilen Code SVG-Elemente ziehen und ablegen.[2]

Beispiel
var drag = d3.behavior.drag();

Mit dieser Zuweisung initialisieren Sie eine neue Instanz des Drag-Verhaltens.


Beispiel
var drag = d3.behavior.drag();
d3.selectAll(".draggable").call(drag);

Jetzt werden alle Elemente, die das Klassenattribut draggable haben, mit der Drag- & Drop-Funktionalität versehen.


Beispiel
var drag = d3.behavior.drag()
    .on("dragstart", function(){
        //ziehen beginnt
    })
    .on("drag", function(){
        //es wird gezogen
    })
    .on("dragend", function(){
        //ablegen
    });

Sie können an die einzelnen Drag-Events auch weitere Funktionsaufrufe anhängen, die dann zusätzliche Anweisungen ausführen.

Ein weiteres Livebeispiel finden Sie auf jsfiddle, das auf dieser Frage in Stackoverflow basiert. [3]



[Bearbeiten] Weblinks

  1. d3.js
  2. collarobadev: D3 Drag And Drop von Jason Graves
  3. stackoverflow: How can I click to add or drag in D3?



Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML