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

Question

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

这是一张图片：

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

Working demo

我不知道如何做到这一点。谢谢。

Answer 1

由于您正在使用 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。

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 中，这取决于前一个元素是否有 class interested。

更新

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

Fiddle

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

Change items style when moving elements in jquery-ui sortable

javascript

css

jquery

jquery-ui

jquery-ui-sortable

更新