如何使用jQuery UI draggable在表单中设置值？

Question

我似乎无法在谷歌上找到关于此的任何教程,但我见过人们在某些网站上这样做.

我正在尝试创建一个表单,我的用户可以将产品拖放到他们的购物清单中,但我不知道如何让jQuery UI可拖动,以便在删除后为该特定表单字段设置值.

Answer 1

丢弃某些东西时会触发一个drop事件:

drop(event,ui)
在droppable上删除已接受的draggable时触发(基于该tolerance选项).

因此,您需要做的就是监听drop事件并<input type="hidden">根据需要更新表单中的内容(例如a ).您可以使用draggable上的数据属性来标识产品元素:

<div data-product="pancakes">
    <!-- ... -->
</div>

然后执行类似这样的操作来更新表单:

$("#droppable").droppable({
    drop: function(event, ui) {
        // ui.draggable is the jQuery object for the thing being dragged (and
        // hence the thing being dropped).
        $('input').val(ui.draggable.data('product'));
    }
});

演示:http://jsfiddle.net/ambiguous/6Cy97/