87,920
社区成员
发帖
与我相关
我的任务
分享请教JQUERY UI 利用draggable+droppable实现一个这个效果怎么做
我先把代码贴近来
效果就是从右边的DIV里往左边的DIV里拖拽并生成一个DIV，我想让生成的DIV里还可以拖动子DIV，无限分层，这个代码怎么写，我现在这里的代码至能支持到2层.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
$(function () {
$("#draggable .product").draggable({ revert: 'invalid', helper: 'clone'});
$("#droppable").droppable({
tolerance: 'intersect',
hoverClass: 'ui-state-highlight',
greedy: true,
drop: function (event, ui) {
$(this).append('<div id=\'droppable\' class=\'ui-widget-content\'></div>');
$('#droppable .ui-widget-content').droppable({
tolerance: 'intersect',
hoverClass: 'ui-state-highlight',
greedy: true,
drop: function (event, ui) {
//$(this).append($(ui.draggable).clone())
$(this).append('<div id=\'droppable\' class=\'ui-widget-content\'></div>');
}
});
//$(this).append(ui.draggable);
//ui.draggable('option', 'revert', true);
}
});
});
</script>
<style type="text/css">
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 60%; height: 100%; padding: 0.5em; float: left; margin: 10px; }
.ui-state-highlight{background: #88EE88;}
</style>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<img id="1b3" src="images/1b3.jpg" class="product" alt="" title="" />
<img id="1b3b1" src="images/1b3b1.jpg" class="product" alt="" title="" />
<img id="1b2b2" src="images/1b2b2.jpg" class="product" alt="" title="" />
</div>
<div id="droppable" class="ui-widget-header">
</div>
</body>
</html>效果就是从右边的DIV里往左边的DIV里拖拽并生成一个DIV，我想让生成的DIV里还可以拖动子DIV，无限分层，这个代码怎么写，我现在这里的代码至能支持到2层.
...全文
