Drag & Drop mit Javascript

Ich habe ein Problem in Javascript (Drag & Drop). Drag & Drop mit Javascript

// I drag: <div id = "name">Name</div>  
 
    
 
<div class="color">white</div> 
 
<div class="color">black</div>  
 
<div class="color">pink</div>  
 
//And drop here: 
 
<div class="color">yellow</div> 
 
<div class="color">green</div> 
 
<div class="color">red</div> 
 

 
//result: 
 
<div class="color">white</div> 
 
<div class="color">black</div> 
 
<div class="color">pink</div> 
 
<div id="name"> 
 
<div class="color">yellow</div> 
 
<div class="color">green</div> 
 
<div class="color">red</div> 
 
</div> 
 
    
 
//continue drag:<div id = "name">Name</div> other and drop above: <div class="color">green</div> 
 
    
 
<div class="color">white</div> 
 
<div class="color">black</div> 
 
<div class="color">pink</div> 
 
<div id="name"> 
 
<div class="color">yellow</div> 
 
</div> 
 
<div id ="name"> 
 
<div class="color">green</div> 
 
<div class="color">red</div> 
 
</div>

Wie ziehen und mit Hilfe von Javascript fallen. Nur Javascript. Bitte helfen Sie mir Ideen oder Beispielcode! Danke euch allen!

I-Code auf diese Weise, Beispiel:

function addDrag(obj,kind){ 
addEvent(obj, 'dragstart', function (e) { 
    dragSrcEl = obj; 
    e.dataTransfer.setData('text/html', obj.innerHTML); 
}); 

addEvent(obj, 'dragover', function (e) { 
    if (e.preventDefault) e.preventDefault(); // allows us to drop 
    $(obj).addClass('dragover'); 
    e.dataTransfer.dropEffect = 'copy'; 
    return false; 
}); 
..........

das Problem ist, wenn ich die "Name" und legen Sie einen beliebigen Ort, class = "Farbe" unter "Name", die der Sohn war ziehen "Name" ... "Name" sind die Eltern. wie man so codiert! Bitte hilf mir!

Quelle

2015-11-25 bamboo

Mögliche Duplikat [Javascript Drag & Drop] (http://stackoverflow.com/questions/255830/javascript-drag-and-drop) –

<!DOCTYPE HTML> 
<html> 
<head> 
<style> 
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} 
</style> 
<script> 
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)); 
} 
</script> 
</head> 
<body> 

<p>Drag the W3Schools image into the rectangle:</p> 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
<br> 
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> 

</body> 
</html>

Quelle

2015-11-25 07:04:31 anshuVersatile

Danke "Anshu". Aber, das Problem ist, wenn ich den "Namen" ziehe und einen beliebigen Ort fallen lasse, class = "color" unter "Name", der der Sohn von "Name" war ... "Name" sind die Eltern. Bitte hilf mir! :( – bamboo

Drag & Drop mit Javascript

Antwort

Verwandte Themen