使用helper: 'original'With sortable()和draggable()似乎不起作
Using helper: 'original' with sortable() and draggable() doesn't appear to work
我有一个简单的HTML页面,我希望能够将编号为6-10的div拖到可排序的列表中,该列表已经包含编号为1-5的div。当我将可拖动助手的值设置为"clone"时,这个页面运行得非常好。但是,我想使用"原始"助手。这似乎根本不起作用。
谁能提出一个替代方案?我试过使"dropTarget"成为一个可dropable()区域,但这似乎不起作用。我想他们是互相冲突了什么的。任何建议都是非常欢迎的!
<!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>" }
receive: function(ev, ui){ ui.item.remove() }
这里的ui。Item是指被拖动的项
相关文章:
- 将数据输入到draggable无法工作
- jquery UI draggable:UI.children不是一个函数
- 通过DRAGGABLE将一个DIV移动到另一个DIF下?(CSS,JQuery)
- 在JQuery UI Accordion Sortable中使用touchpunch无法正确使用touch
- Jquery Draggable-在浏览器刷新时保持位置
- jQuery Draggable:内存泄漏
- jQuery UI draggable:绑定到mousemove事件中的对象
- value of jquery sortable
- jqueryui sortable完成排序后的事件
- element.sortable 不是一个函数 Angular
- Angular ng sortable-如果我在一个栏中添加了一个搜索框,则拖放在两列之间无法正常工作
- 将jQuery draggable()元素移动到新的父元素
- jquery-ui-rails的draggable和dropable函数不起作用
- jquery sortable()完成回调函数
- 使用jquery draggable UI使项目可拖动
- jquery ui draggable中的奇怪偏移量
- 在draggable/doppable::javascript中添加双击
- 使jQuery Draggable在其他行中可见
- jquery draggable droppable with sortable
- 使用helper: 'original'With sortable()和draggable()似乎不起作