ui jquery 可拖动元素
Posted
技术标签:
【中文标题】ui jquery 可拖动元素【英文标题】：ui jquery draggable element 【发布时间】：2012-06-27 11:52:08 【问题描述】：我想实现一个动态的方式来创建一个列表拖放，现在只是理论上的，我想将一个“ul”标签（list2）拖到一个空的“ul”标签（mysortable）上，然后我想要在这两个“ul”标签内拖动一个“list”标签（list3），我希望“list”标签作为嵌套“ul”标签的子级或兄弟级坚持使用内部嵌套的“ul”标签。到目前为止，如果我更改代码“connectToSortable:”div.demo ul.mysortable”，我已经成功地让“list”标签成为内部嵌套“ul”标签的兄弟，但我无法弄清楚这个问题小时候，“list”标签没有粘在嵌套的“ul”标签上，请帮忙，提前谢谢。
html代码代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable + Sortable</title>
<link rel="stylesheet" href="themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="ui/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="ui/jquery.ui.sortable.js"></script>
<link rel="stylesheet" href="../demos.css" />
<style>
.demo ul list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; margin: 5px; padding: 5px; width: 150px;
.demo li margin: 5px; padding: 5px; width: 150px;
.mydemo ul list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; margin: 5px; padding: 5px; width: 150px;
.mydemo li margin: 5px; padding: 5px; width: 150px;
.background color:red;
</style>
<script type="text/javascript">
$(function()
$(".sortable").sortable(
connectWith: ".sortable",
);
$(".mysortable").sortable(
connectWith: ".mysortable",
receive: function (event, ui)
var arrList = $(".mysortable li").map(function() return $(this).attr('type') ).get();
var arrul = $(".mysortable ul").map(function() return $(this).attr('type') ).get();
var checkInsideMysortable = arrList[0];
var checkInsideMysortable1 = arrList[1];
var checkInsideMysortableul = arrul[0];
if (checkInsideMysortableul == 'ulist')
else if (checkInsideMysortable == 'link')
if (checkInsideMysortable1 == 'link')
alert("can't add another element if first element is a link");
location.reload();
else
);
$("#list2 ul").draggable(
connectToSortable: ".mysortable",
helper: "clone",
);
var selector = '.mysortable, .nestedClone';
$("#list3 li").draggable(
connectToSortable: "div.demo ul.mysortable ul.nestedClone",
helper: "clone",
);
$( "ul, li" ).disableSelection();
);
function listOrder()
var arr = $(".mysortable li").map(function() return $(this).attr('type') ).get();
alert (arr);
</script>
</head>
<body>
<div id="myTest" class="demo">
drag links here:
<ul class="mysortable" style="background-color:yellow;"> </ul>
</div>
<button type="button" onclick="listOrder()">save list order</button>
<div class="mydemo">
<ul id="list2">
<ul id="11" type="ulist" class="nestedClone ui-state-default"><span>ul1</span></ul>
<ul id="12" type="ulist" class="nestedClone ui-state-default"><span>ul2</span></ul>
</ul>
</div>
<div class="mydemo">
<ul id="list3">
<li type="link" id="13" class="ui-state-default">link</li>
<li id="14" type="link" class="ui-state-default">link</li>
</ul>
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：试试这个：
在 sortable 的接收事件中，获取要添加的列表项的 id。
例如
$('.selector').sortable(
receive: function(event, ui) ...
);
在receive函数中，执行代码获取listitem的id然后：
$('#listitem').appendTo($('#nestedul'));
这应该至少让你开始。
【讨论】：
以上是关于ui jquery 可拖动元素的主要内容，如果未能解决你的问题，请参考以下文章
Jquery ui - 可排序：在可排序元素中按图标“句柄”拖动