Geschrieben von wintercall am 02.06.2016 um 15:11:
Drag and Drop
Hallo,
ich möchte mehrere Wörter in verschiedene Boxen droppen können. Zum Beispiel Wort 1 soll nur in Box 1 gedroppt werden können usw.
Wenn die Wörter reingedroppt werden, möchte ich, dass sie dort nicht verschwinden, sondern enthalten bleiben.
Ich habe mir verschiedene Tutorials angesehen und etwas zusammen gemixt, aber leider klappt es noch nicht so, wie ich möchte.
Hier der Quellcode:
<p data-type="eins" draggable="true" id="drag1" >hallo</p>
<p data-type="eins" draggable="true" id="drag2">hallo2</p>
<p data-type="zwei" draggable="true" id="drag3">hallo3</p>
<p data-type="zwei" draggable="true" id="drag4">hallo4</p>
<div data-accept="eins" class="dropzone" id="drop"></div>
<div data-accept="zwei" class="dropzone" id="drop2"></div>
var indexOf = Function.prototype.call.bind(Array.prototype.indexOf);
$('.dropzone').on('dragover', function(ev){
var accept = $(this).attr('data-accept');
if(indexOf(ev.originalEvent.dataTransfer.types, accept) !== -1){
ev.preventDefault();
}
});
$('p').on('dragstart', function(ev) {
var type = $(this).attr('data-type');
var data = $(this).text();
ev.originalEvent.dataTransfer.setData(type, data);
});
$('.dropzone').on('drop', function(ev){
ev.preventDefault();
var key = $(ev.target).attr('data-accept');
var data = ev.originalEvent.dataTransfer.getData(key);
ev.target.appendChild(document.getElementById(data));
});