0

使用此处的示例作为起点，我着手自定义我的可拖动和可排序数据。在链接的示例中，我们在可拖动对象中有简单的文本。我用选择标签替换了它。

将选择元素拖入可排序时，我想在将其移动到可排序列表时仅使用所选选项的值。为此，我使用了自定义助手，但不幸的是，一旦我放下它，它就会再次变成一个选择元素。

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

我怎样才能解决这个问题？感谢您的关注。JSFiddle 在这里：

PS：从 droppable 中删除所有类也没有帮助，并且在组内排序时也会影响，所以这是错误的方法

$("#sortable").droppable({
   drop: function (event, ui) {
       alert('dropped');
       $(ui.draggable).removeClass();
   },
   activeClass: "ui-state-hover",
   hoverClass: "ui-state-active"
});
4

1 回答 1

0

有点复杂的解决方案，但这里有：

首先我修改了可拖动的自定义辅助函数。我找到了我正在寻找的类，并且只克隆了第一个实例 (li)，但向其中添加了所有列表框的文本。这是由于 fcbkcomplete 的设计。无论如何，现在我们只剩下一个列表项和我需要的文本。我将 ui-state-default 类添加到克隆中，到这里就完成了

                $("#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 的一些错误，但这现在完全符合预期:)

于 2013-01-16T10:31:08.300 回答