使用 jquery sortable 获取放置的元素

Question

我有一个列表和一些输入字段。我想将列表项拖到输入字段中，并在更新回调中，获取目标输入字段 - 因为我想将列表项的文本复制到输入字段的 value 属性中。我也不希望列表项从其原始位置消失。这就是我所做的：

<ul id="field_source">
      <li>some text</li>
      <li>some other text</li>
 </ul>

<ul class="designer_row connectRow">
  <li>
    <input type="text" class="connectColumn" /><input type="text" class="connectColumn" />
  </li>
</ul>

$( "#field_source, input" ).sortable({
  connectWith: ".connectColumn",
  forcePlaceholderSize: false,
  helper: function(e,li) {
    copyHelper= li.clone().insertAfter(li);
    return li.clone();
  },
  stop: function(event, ui) {
    copyHelper && copyHelper.remove();
  },
  update: function(event, ui){
    // both ui.item and this are giving me the item dragged, not the element dropped on (the input field)
  }
})

如何确定目标输入字段？

Answer 1

该元素实际上并没有被“放在”另一个元素上，而不是介于两者之间：

element.sortable({
    update: function(event, ui) {
        var item = ui.item;
        var target = ui.item.prev();
    }
});

如果第一个位置“目标”不存在。

Answer 2

你不应该使用sortable来做你想做的事，而是使用droppable和draggable

HTML

<ul id="field_source">
    <li><span>some text</span></li>
    <li><span>some other text</span></li>
 </ul>

<input type="text" class="connectColumn" />
<input type="text" class="connectColumn" />

JS

$( ".connectColumn" ).droppable({
    accept: "#field_source li span",
    drop: function( event, ui ) {
       $(event.target).val(ui.draggable.text());
      }
});
$( "#field_source li span" ).draggable({ 
    revert: "valid" 
});

这是一个有效的Fiddle