可拖动的 div 到可放置的文本框，然后回到原来的位置

Question

我正在尝试将我的 div 拖到可放置的文本框上，然后我想使用文本框中的可清除功能将可拖动的 div 发送回它们原来的位置。

在这个jsfiddle 我隐藏了当前可拖动并在文本框中显示文本，但是当我单击可清除按钮时，我显示了所有可拖动的 div。单击可清除按钮后如何仅显示当前可拖动对象？或者还有其他方法吗？

.on('touchstart click', '.onX', function(ev) {
$(".draggable").css({
'left': $(".draggable").data('originalLeft'),
'top': $(".draggable").data('origionalTop')
});
$(".draggable").show();
$(this).removeClass('x onX').val('').change();
});

我需要将 $(".draggable") 更改为当前可拖动对象。因为现在当我点击任何文本框中的可清除按钮时，所有可拖动的 div 都会回到原来的位置。

Answer 1

我刚刚弄明白了。当我将 div 拖到文本框上时，我为可拖动的 div.

提供了一个 id

$(ui.draggable).attr("id", $(ui.draggable).text());

然后当单击可清除按钮时，我调用该 ID。

 $("#" + currentID).css({
        'left': $(".draggable").data('originalLeft'),
        'top': $(".draggable").data('origionalTop')
    });
    $("#" + currentID).show();

你可以在这里查看http://jsfiddle.net/nakres/hqbhLzkm/

可拖动的 div 到可放置的文本框，然后回到原来的位置

draggable divs onto droppable textboxes then back to their original places

jquery

jquery-ui-draggable

jquery-ui-droppable