JavaScriptを使用してドラッグアンドドロップする方法

JavaScript（ドラッグ＆ドロップ）に問題があります。ドラッグして、JavaScriptを使用して削除する方法 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>

。唯一のjavascript。アイデアやサンプルコードを教えてください！皆さん、ありがとうございました！

私はこのように、コード例：私は「名前」を引くとの息子であった「名前」の下の任意の場所、クラス=「色」をドロップするときに問題がある

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

を"名前" ... "名前"は親です。そのようにコードする方法！私を助けてください！ [Javascriptのドラッグ＆ドロップ]の

出典

2015-11-25 bamboo

可能な重複は（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>

出典

2015-11-25 07:04:31 anshuVersatile

は "Anshu" ありがとうございました。しかし、問題は、 "名前"の息子であった "名前"の下で、 "名前"を引っ張って任意の場所、クラス= "色"をドロップするときです... "名前"は親です。私を助けてください！ :( – bamboo

JavaScriptを使用してドラッグアンドドロップする方法

答えて

関連する問題