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

Question

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

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

Answer 1

丢弃某物时会触发drop event：

  

drop（event，ui）
  在droppable上删除已接受的拖动时触发（基于tolerance选项）。

所以你需要做的就是监听drop事件并根据需要更新表单中的内容（例如<input type="hidden">）。您可以使用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/