拖動並插入到另一個div

我想設計一個功能，可以拖動和插入一個div到另一個div。拖動並插入到另一個div

例如：

<div id="1"> </div> <div id="2"> </div>

我要讓＃1拖動（我知道它可以使用jQuery來完成，因此可拖動的是不是我的問題的一部分），並拖動＃1以上＃2 ，當mouseup，＃2可以插入＃1

<div id="1"> <div id="2"> </div> </div>

有人可以向我解釋如何實現這一目標嗎？

來源

2013-08-03 user2640254

如果'jQuery是不是一部分你的問題'，我開始覺得這是一個家庭作業。 – MightyPork

這裏是演示爲您的參考http://jsfiddle.net/3fsVd/ –

@MightyPork我只是說可拖動不是我的問題的一部分，而不是jQuery – user2640254

你可以簡化這個頗有幾分使用jQuery UI's Sortable

Working Example

$(document).ready(function() { 
    addElements(); 
    $(function() { 
     $("#list1, #list2").sortable({ 
      connectWith: ".lists", 
      cursor: "move" 
     }).disableSelection(); 
    }); 


}); 

function addElements() { 
    $("#list1").empty().append(
     "<li id='item1' class='list1Items'>Item 1</li>" + 
     "<li id='item2' class='list1Items'>Item 2</li>" + 
     "<li id='item3' class='list1Items'>Item 3</li>"); 
}

來源

2013-08-03 14:19:21 apaul

謝謝，這正是我想要的。 –

對於演示：Click Here

代碼：

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Droppable - Default functionality</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <style> 
    #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } 
    #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } 
    </style> 
    <script> 
    $(function() { 
    $("#draggable").draggable(); 
    $("#droppable").droppable({ 
     drop: function(event, ui) { 
     $(this) 
      .addClass("ui-state-highlight") 
      .find("p") 
      .html("Dropped!"); 
     } 
    }); 
    }); 
    </script> 
</head> 
<body> 

<div id="draggable" class="ui-widget-content"> 
    <p>Drag me to my target</p> 
</div> 

<div id="droppable" class="ui-widget-header"> 
    <p>Drop here</p> 
</div> 


</body> 
</html>

來源

2013-08-03 10:01:20

拖動並插入到另一個div

回答

相關問題