[英]How to drop a draggable into a sortable, the droppped item is not the original element but a custom helper
[英]Using helper: 'original' with sortable() and draggable() doesn't appear to work
我有一个简单的HTML页面,希望在该页面上将6-10的div拖动到可排序列表中,该列表已经包含1-5的div。 当我将可拖动的帮助程序值设置为“ clone”时,此页面运行良好。 但是,我想使用“原始”帮助器。 这似乎根本不起作用。
有人可以建议替代方法吗? 我尝试将“ dropTarget”设置为droppable()区域,但这似乎不起作用。 我想他们在互相冲突或发生什么事。 任何建议将非常欢迎!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#dropTarget").sortable({ revert: true });
$("#itemlist div").draggable({ connectToSortable: "#dropTarget", helper: 'original', revert: 'invalid' });
$('#itemlist div, #dropTarget').disableSelection();
});
</script>
</head>
<body>
<div id="dropTarget" style="width: 100px; min-height: 50px; background-color: Red;">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
</div>
<div id="itemlist">
<div>Item 6</div>
<div>Item 7</div>
<div>Item 8</div>
<div>Item 9</div>
<div>Item 10</div>
</div>
</body>
</html>
我在这里修改了您的小提琴: http : //jsfiddle.net/3wCHu/5/
正如jquery文档所说,使用helper:"original"
时无法连接到可排序列表。 我们可以有一个解决方法。
首先,您可以将辅助代码放在#itemlist中,例如-
helper: function(ev, ui) { return "<div>" + $(this).text() + "</div>" }
其次,在您的#dropTarget代码中,添加一个选项-
receive: function(ev, ui){ ui.item.remove() }
ui.item在这里是指被拖动的项目。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.