在可排序的jquery-ui中移动元素时更改项目样式

Question

我有两列，它们是jquery-ui可排序的。 左列是所选项目，右列是未选择项目。 您可以在两者之间移动项目（ li元素）。 每个元素可以在左栏中，也可以在右栏中。 左列中的第一个元素（选择）不能排序，并且不能移动（名称ID）。 左列中的元素与右列中的元素具有不同的样式，左列中的每个li元素也位于自身行上，但右列中的元素是浮动的。

这是一张图片：

一切工作正常，但是当用户在列之间移动元素时，当元素位于左列或右列上方时，我需要元素更改其样式（移动时=鼠标左键按下）。 通过更改样式，我的意思是，当我开始将元素Telefón从左移到右时，当我将在右列上方时，该元素应将其背景颜色更改为灰色，而不是整行显示，而仅在其宽度上显示反之亦然。

工作演示

我不知道该怎么做。 谢谢。

Answer 1

由于您使用的是jQuery UI，因此可以利用可放置小部件。 该函数具有over和out两个回调。 每当可拖动元素在可放置区域之上或之外时，更改其CSS属性。

看到它在这里工作。

$(".columns_all").droppable({
    over: function (event, ui) {
        ui.helper.css("background-color", "lightblue");
    },
    out: function (event, ui) {
        ui.helper.css("background-color", "");
    }
});

更新资料

根据要求，这是双向拖动的代码。

elwidth = $(".columns_selected li").width(); // used to set element width

// left to right
$(".columns_all").droppable({
    over: function (event, ui) {
        ui.helper.css({
            "background-color": "lightblue",
            width: "auto"
        });
    },
    out: function (event, ui) {
        ui.helper.css({
            "background-color": "",
            width: elwidth
        });
    },
    drop: function (event, ui) {
        ui.helper.css({
            "background-color": "#ccc"
        });
    }
});

// right to left
$(".columns_selected").droppable({
    over: function (event, ui) {
        ui.helper.css({
            "background-color": "red",
            width: elwidth
        });
    },
    out: function (event, ui) {
        ui.helper.css({
            "background-color": "",
            width: "auto"
        });
    },
    drop: function (event, ui) {
        ui.helper.css({
            "background-color": "#74ce9c"
        });
    }
});

更新小提琴 。

Answer 2

您可以将其添加到可排序选项中：

over: function (event, ui) {
        if ($(ui.item).closest("ul").hasClass("interested")) {
            $(ui.item).detach().appendTo("#categories-source");
            $(ui.item).css("width", "initial");
        } else {
            $(ui.item).detach().appendTo("#categories-chosen");
            $(ui.item).css("width", "210px");
            $(ui.item).css("height", "initial");
        }
    }

它将拖动的元素放入适当的ul具体取决于前一个是否对课程interested 。

更新资料

还要为拖动的元素设置适当的尺寸（因为左侧列表每行一个）。

小提琴