更新

Question

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

这是一张图片：

enter image description here

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

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

<强>更新

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

Fiddle

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

2 个答案:

更新