使用辅助程序：带有sortable（）和draggable（）的“原始”功能似乎无效

Question

I have a simple HTML page on which I want to be able to drag the divs numbered 6-10 into the sortable list, which already contains divs numbered 1-5. 我有一个简单的HTML页面，希望在该页面上将6-10的div拖动到可排序列表中，该列表已经包含1-5的div。 When I set the draggable helper value to 'clone', this page works perfectly well. 当我将可拖动的帮助程序值设置为“ clone”时，此页面运行良好。 However, I want to use the 'original' helper. 但是，我想使用“原始”帮助器。 This doesn't appear to work at all. 这似乎根本不起作用。

Can anyone suggest an alternative? 有人可以建议替代方法吗？ I've tried making "dropTarget" a droppable() area, but that doesn't seem to work. 我尝试将“ dropTarget”设置为droppable（）区域，但这似乎不起作用。 I imagine they are conflicting with each other or something. 我想他们在互相冲突或发生什么事。 Any advice would be very welcome! 任何建议将非常欢迎！

<!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>

Answer 1

I have modified your fiddle here : http://jsfiddle.net/3wCHu/5/ 我在这里修改了您的小提琴： http : //jsfiddle.net/3wCHu/5/

As jquery documentation says that it not possible to connect to a sortable list when using helper:"original" . 正如jquery文档所说，使用helper:"original"时无法连接到可排序列表。 We can have a workaround. 我们可以有一个解决方法。

First thing you can put helper code in your #itemlist as - 首先，您可以将辅助代码放在#itemlist中，例如-
helper: function(ev, ui) { return "<div>" + $(this).text() + "</div>" }

Secondly, in your #dropTarget code add an option as - 其次，在您的#dropTarget代码中，添加一个选项-
receive: function(ev, ui){ ui.item.remove() }
Here ui.item refers to the item that is dragged. ui.item在这里是指被拖动的项目。

使用辅助程序：带有sortable（）和draggable（）的“原始”功能似乎无效

问题描述

1 个解决方案

解决方案1
4 已采纳 2011-10-17 11:50:25

使用辅助程序：带有sortable（）和draggable（）的“原始”功能似乎无效

问题描述

1 个解决方案

解决方案1 4 已采纳 2011-10-17 11:50:25

解决方案1
4 已采纳 2011-10-17 11:50:25