使用可排序的jQuery獲取元素

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" 
});

這是一個工作的小提琴