Come trascinare e rilasciare usando javascript

Ho un problema in javascript (trascina e rilascia). Come trascinare e rilasciare usando 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>

Come per trascinare utilizzando JavaScript. Solo javascript. Per favore aiutami idee o codice di esempio! grazie a tutti!

I Codice in questo modo, ad esempio:

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; 
}); 
..........

il problema è quando tiro il "Nome" e rilasciare qualsiasi posizione, class = "colore" in "Nome", che era il figlio di "Nome" ... "Nome" sono i genitori. come programmare in questo modo! mi aiuti per favore!

fonte

2015-11-25 bamboo

Eventuali duplicati di [drag and drop Javascript] (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>

fonte

2015-11-25 07:04:31 anshuVersatile

grazie "Anshu". Ma il problema è quando estraggo il "Nome" e rilasciamo qualsiasi posizione, class = "color" sotto "Nome" che era il figlio di "Nome" ... "Nome" sono i genitori. Mi aiuti per favore! :( – bamboo

Come trascinare e rilasciare usando javascript

risposta

Problemi correlati