Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

SVG/Tutorials/Drag & Drop

Aus SELFHTML-Wiki
< SVG‎ | Tutorials
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.

Drag und Drop mit d3.js[Bearbeiten]

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]



Weblinks[Bearbeiten]

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