將div拖放到另一個div中
[英]Drag and insert div into another 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>
有人可以向我解釋如何實現這一目標嗎？
2 個解決方案
解決方案1
6 已采納 2013-08-03 14:19:21
您可以使用jQuery UI的Sortable來簡化這一點
$(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>");
}
解決方案2
1 2013-08-03 10:01:20
對於演示： 單擊此處
代碼：
<!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>
如何將一個div拖動到另一個div的位置？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.