Jquery ui 如何制作可拖动的项目'；s样式是否使用自定义辅助对象或任何其他方法匹配目标？

作为起点，我开始定制我的可拖动和可排序数据。在链接的示例中，我们在Dragable中有简单的文本。我用select标记替换了它

将select元素拖动到可排序列表中时，我只希望在将其移动到可排序列表时使用所选选项的值。为此，我使用了自定义帮助器，但不幸的是，一旦我删除它，它就会再次变成select元素

$("#draggable").draggable({
   connectToSortable: "#sortable",
   opacity: 0.8,
   cursor: "move",
   helper: function () {
       return $("<div>" + $(this).text() + "</div>");
   },
   distance: 20
});

---

这是一个有点复杂的解决方案，但下面是：

首先，我修改了draggable中的自定义助手函数。我找到了我要查找的类，只克隆了第一个实例（li），但添加了所有列表框的文本。这是由于fcbkcomplete的设计。无论如何，现在我们只剩下一个列表项和我需要的文本。我将ui状态默认类添加到克隆中，这里就完成了

                $("#draggable").draggable({
                distance: 10,
                cursor: "move",
                helper: function (e, ui) {
                    var newListItem = $(this).find('.bit-box').first().clone().removeClass().addClass("ui-state-default");
                    var fullCommand = "";
                    $(this).find('.bit-box').each(function( index ) {
                        fullCommand += $(this).text() + " ";
                    });

                    newListItem.text(fullCommand);
                    return (newListItem);
                },
                revert : true
                });

在droppable中，我仍然处理drop事件，但这次使用ui.helper.clone而不是ui.draggable

                $("#container").droppable({
                accept: '.product',
                drop: function (event, ui) {
                    var x = ui.helper.clone();
                    x.removeClass().attr('style', '');
                    x.addClass("ui-state-default");
                    x.appendTo('#container');
                    ui.helper.remove();
                }
            });

我仍然需要修复wrt css中的一些错误，但这与预期的效果完全一样：）

                $("#container").droppable({
                accept: '.product',
                drop: function (event, ui) {
                    var x = ui.helper.clone();
                    x.removeClass().attr('style', '');
                    x.addClass("ui-state-default");
                    x.appendTo('#container');
                    ui.helper.remove();
                }
            });