如何使用自定义帮助程序或任何其他方法使可拖动项目的样式与目标匹配？ [英] How can I make a draggable item's style match the target using the custom helper or any other method?

问题描述

使用此处的示例作为起点，我着手自定义可拖动和可排序的数据。在链接的示例中，我们的可拖动文本中包含简单的文本。我用select标记代替了它。

Using the example here as a starting point, I set out to customize my draggable and sortable data. In the linked example, we have simple text in the draggable. I replaced it with a select tag.

将select元素拖到sortable中时，我只想将select选项的值移到sortable时使用清单。为此，我使用了自定义帮助器，但不幸的是，一旦放下它，它就会再次变成一个选择元素。

When dragging the select element into the sortable, I would like to use only the value of the selected option when moving it to the sortable list. To this end, I use the custom helper, but unfortunately, as soon as I drop it, it turns into a select element again.

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

我该如何解决？感谢您的光临。 JSFiddle在这里：

How can I fix this? Thanks for looking. JSFiddle is here:

PS：删除droppable中的所有类也无济于事，并且在组内排序时也会受到影响，所以这是错误的方法

PS: Removing all the classes from droppable didn't help either, and affects when sorting within the group as well, so this is the wrong approach

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

推荐答案

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

Bit of a convoluted solution, but here goes:

首先，我在可拖动对象中修改了自定义帮助器功能。我找到了要查找的课程，仅克隆了第一个实例（li），但将所有列表框的文本添加到了该实例中。这是由于fcbkcomplete的设计。无论如何，现在我们只剩下一个列表项和我需要的文本。我将ui-state-default类添加到克隆中，并在这里完成

First I modified the custom helper function in the draggable. I find the class I'm looking for, and clone only the first instance (li), but add to it the text of all the list boxes. This is due to the design of fcbkcomplete. Anyway, now we are left with a single list item and the text I need. I add the ui-state-default class to the clone, and I'm done here

                $("#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。

In the droppable, I still ended up handling the drop event, but this time, using ui.helper.clone instead of 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的一些错误，但是现在可以正常使用了：）

There are still some errors I need to fix wrt css, but this works exactly as expected now :)

这篇关于如何使用自定义帮助程序或任何其他方法使可拖动项目的样式与目标匹配？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！