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

Question

我有两列，它们是 jquery-ui 可排序的。左边一栏是被选中的项目，右边都是没有被选中的。您可以在两者之间移动项目（li 元素）。每个元素可以在左侧或右侧列中。左列（选择）中的第一个元素不可排序且无法移动（名称 ID）。左列元素的样式与右列元素的样式不同，左列中每个li元素都在自己的行上，但在右列中它们是浮动的。

这是一张图片：

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

Working demo

我想不通，这是怎么做到的。谢谢。

Answer 1

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

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 类。

更新

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

Fiddle

Answer 2

由于您使用的是 jQuery UI，您可以利用 droppable 小部件。这有两个回调，over 和 out。每当可拖动元素超出或超出可放置区域时，更改其 CSS 属性。

看到它工作here。

$(".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"
        });
    }
});

更新fiddle。