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:
Code
<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));
});Beispielsweise bekomme ich den Fehler:
Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.