Draggable zieht nicht

Question

Irgendwie ziehen meine Draggables nicht mehr in die Platzhalter.

Ich bemerkte, es gibt einen Fehler auf der appendChild in der drop() Funktion, aber wenn ich dort warnt merke ich es kommt nicht einmal so weit.

var people = ['Sinan', 'Babette', 'Thomas', 'Yannick', 'Nick']; 
 
$.each(people, function(key, val) { 
 
    $('#placeholders').append('<div class="dnd" data-id="' + val + '" ondrop="drop(event)" ondragover="testDiv(event, innerHTML)"></div>'); 
 
}); 
 

 
$('#seizeImg img').on('dragstart', function(event) { 
 
    drag(event); 
 
}); 
 

 
function testDiv(ev, x) { 
 
    if (x.length > 0) { 
 
    return false; 
 
    } else { 
 
    allowDrop(ev); 
 
    return true; 
 
    } 
 
} 
 

 
function allowDrop(ev) { 
 
    ev.preventDefault(); 
 
} 
 

 
function drag(ev) { 
 
    ev.dataTransfer.setData("text", ev.target.id); 
 
} 
 

 
function drop(ev) { 
 
    ev.preventDefault(); 
 
    var data = ev.dataTransfer.getData("text"); 
 
    ev.target.appendChild(document.getElementById(data)); 
 

 
    var complete = false; 
 
    $.each('#seizeImg img', function(key, val) { 
 
    alert(key); 
 
    }); 
 
}

.dnd { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 10%; 
 
    height: 160px; 
 
    padding: 10px; 
 
    border: 2px solid #B7E6E6; 
 
    background: rgba(51, 255, 102, 0.2); 
 
} 
 

 
#seizeImg img { 
 
    width: 10%; 
 
    height: 160px; 
 
} 
 

 
div.label { 
 
    height: 25px; 
 
    text-align: center; 
 
    border: none; 
 
    background: none; 
 
} 
 

 
div.buf { 
 
    background: rgba(255, 0, 0, 0.2); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="placeholders"> 
 
</div> 
 
<br> 
 
<br> 
 
<div id="seizeImg"> 
 
    <img id="Babette" src="img/Babette.jpg" draggable="true" ondrop="drop(event)" width="186" height="186"> 
 
    <img id="Thomas" src="img/Thomas.jpg" draggable="true" ondrop="drop(event)" width="186" height="186"> 
 
    <img id="Yannick" src="img/Yannick.jpg" draggable="true" ondrop="drop(event)" width="186" height="186"> 
 
    <img id="Sinan" src="img/Sinan.jpg" ondrop="drop(event)" draggable="true" ondrop="drop(event)" width="186" height="186"> 
 
    <img id="Nick" src="img/Nick.jpg" ondrop="drop(event)" draggable="true" ondrop="drop(event)" width="186" height="186"> 
 
</div>

Answer 1

Ich nehme an, Sie verwenden jqueryUI mit den Drag & Drop-Bibliotheken installiert. Wenn Sie nicht sind, könnte das die Dinge ein wenig leichter für Sie machen.

man könnte es mit funktioniert:

$('#seizeImg img').draggable(); 

und wenn Sie die Tropfen wollte Daten speichern alles, was Sie tun müssen, ist:

$('#placeholders').droppable({ 
accept: $('#seizeImg img'), 
drop: function(){ 
//enter code here to take place whenever you drop something on it 
// if you want to take a value from the object you are dropping on 
// the droppable object just use: 
var varID = (ui.draggable.attr("value"); 
    } 
}); 

Es ist ein wenig kürzer und jQueryUI nimmt eine Menge der Ratespiele.

BEARBEITEN: Sofern Sie den Code oben nicht enthalten, rufen Sie nie die tatsächliche jqueryUI ziehbare Funktion. irgendwo um

$(document).ready({function(){ 
    // you have to include 
$('seizeImg img').draggable({function(){ 
    //add some more moving parts here if you need to 
    }); 
} 

nur die Einstellung ziehbare = 'wahr' in Ihrem HTML ist nicht das Gleiche.

Answer 2

Das Problem, das Sie unter

durch die Linien verursacht werden, zugewandt ist,

var data = ev.dataTransfer.getData("text"); 
ev.target.appendChild(document.getElementById(data)); 

Sie versuchen, ein Element anzuhängen, die nicht von Node Typ ist. Das passiert, weil data eine leere Zeichenfolge ist, also document.getElementById("")null zurückgibt, die nicht an appendChild weitergeleitet werden darf.