尝试使用jQuery-UI拖放或双击克隆从非排序到可排序。

Question

我正在尝试将我找到的几个解决方案结合起来--主要是使用这里在堆栈溢出上找到的答案--非常感谢。

我正在尝试使用jquery创建一个拖放解决方案。我有一个要添加的项目列表。我有我的要求：

1. 当我从“选择”中拖动一个项目时，不应该将它从列表中删除。我正在使用克隆()方法来完成这个任务。
2. 我想要能够选择在“选择”项目被删除的地方。我已经通过使用.sortable()实现了这一点。
3. 我希望能够在“选择”列表中重新订购商品。
4. 如果我双击一个项目从“选择”，我希望它自动添加到底部的“选择”列表。
5. 当项目被添加到“选择”列表中时，我需要更改双击的效果。

我目前的解决方案可以通过以下操作看到：https://jsfiddle.net/q0k7ouud/

<div id="items-selector">

  <ul id="choices" class="window-view">
    <li class="boilerplate-li" id="bp-1">item-1</li>
    <li class="boilerplate-li" id="bp-2">item-2</li>
    <li class="boilerplate-li" id="bp-3">item-3</li>
  </ul>

  <ul id="selections" class="window-view">
  </ul>

</div>

和

$(document).ready(function() {
  $('#items-selector #choices').sortable({
    connectWith: '#items-selector #selections',
    forcePlaceholderSize: false,
    helper: function(e, li) {
      copyHelper = li.clone().insertAfter(li);
      return li.clone();
    },
    stop: function() {
      copyHelper && copyHelper.remove();
    },
    containment: '#items-selector'
  });
  $("#items-selector #selections").sortable({
    receive: function(e, ui) {
      copyHelper = null;
    }
  });
});

以下是我希望堆叠溢出能对我有帮助的问题：

1. 我不想在“选择”中重新排列项目。
2. 当我开始拖动一个项目时，克隆会被插入到“选择”列表中，导致列表跳下，但是当我继续拖动该项目时，列表会跳回来。
3. 我不知道如何添加双击功能(要求4和5)。至于#4，我怀疑我可以使用一个简单的ondblclick属性，但我不确定一旦将它添加到“选择”列表中，如何更改该属性。

对于这些问题，我尝试将sortable()替换为draggable()和dropable()，调整helper: functions，以及我试图从其他人的问题中提取的其他见解。但似乎如果我解决了一个问题，我创造了另一个问题，直到我最后追逐我的尾巴。我希望堆叠溢出的专家能帮助我找到一个完整的解决方案。

我预先感谢你的协助。

Answer 1

@Twisty使我走上了正确的道路。我需要的是使用.draggable()作为我的选择。该密钥是connectToSortable键，它允许我将可拖放项连接到可排序列表。我还没有实现我在最初的问题中描述的双击功能，但是现在尘埃落定了，这应该是非常直接的。

以下是新的javascript

$(document).ready(function() {
  $('#items-selector #choices li').draggable({
    connectToSortable: '#items-selector #selections',
    cursor: 'move',
    helper: 'clone',
    scope: "drop",
    containment: '#items-selector'
  });
  $("#items-selector #selections").sortable({
    receive: function(e, ui) {
      copyHelper = null;
    }
  });
});

小提琴手：https://jsfiddle.net/q0k7ouud/5/