Cách kéo và thả bằng cách sử dụng javascript

Tôi gặp sự cố trong javascript (kéo và thả). Cách kéo và thả bằng cách sử dụng 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>

Làm thế nào để kéo và thả sử dụng javascript. Chỉ javascript. Xin hãy giúp tôi ý tưởng hoặc mã mẫu! cảm ơn tất cả!

tôi code theo cách này, ví dụ:

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

vấn đề là khi tôi kéo "Tên" và thả bất kỳ vị trí, class = "màu" dưới "Tên", mà là con trai của "Tên" ... "Tên" là cha mẹ. cách mã theo cách đó! làm ơn giúp tôi!

Nguồn

2015-11-25 bamboo

có thể trùng lặp của [Javascript Kéo và thả] (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>

Nguồn

2015-11-25 07:04:31 anshuVersatile

cảm ơn "Anshu". Nhưng, vấn đề là khi tôi kéo "Tên" và thả bất kỳ vị trí nào, class = "color" dưới "Name" là con của "Name" ... "Name" là cha mẹ. Làm ơn giúp tôi! :( – bamboo

Cách kéo và thả bằng cách sử dụng javascript

Trả lời

Các vấn đề liên quan