我有一个列表和一些输入字段。我想将列表项拖到输入字段中,并在更新回调中,获取目标输入字段 - 因为我想将列表项的文本复制到输入字段的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)
}
})
如何确定目标输入字段?
答案 0 :(得分:2)
该元素实际上不是放置在另一个元素上,而不是放置在另一个元素之间:
element.sortable({
update: function(event, ui) {
var item = ui.item;
var target = ui.item.prev();
}
});
在第一个位置时,“目标”不存在。
答案 1 :(得分:0)
您不应该使用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