jquery在可排序时更改类答案

【问题标题】：jquery change class when sortablejquery在可排序时更改类
【发布时间】：2015-06-16 09:42:15
【问题描述】：

//JavaScript 

$(function() {
  $( "#sortable1, #sortable2" ).sortable({
    connectWith: ".connectedSortable"
  }).disableSelection();
});

/*CSS*/

#sortable1, #sortable2 {
  border: 1px solid #eee;
  width: 142px;
  min-height: 20px;
  list-style-type: none;
  margin: 0;
  padding: 5px 0 0 0;
  float: left;
  margin-right: 10px;
}
#sortable1 li, #sortable2 li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}

<!--My HTML -->

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
</ul>

我的问题：当li 元素从一个ul 移动到另一个ul 时，li 包含类更改。

例如。将li 从第一个ul 移到第二个ul 那时li 类更改ui-state-default 到ui-state-highlight。

你可以编辑成 js fiddle http://jsfiddle.net/fo51dggo/

【问题讨论】：

我觉得你的问题不是很清楚

标签： javascript jquery html css jquery-ui

【解决方案1】：

sortable中有一个stop方法。在那里换班

排序停止时触发停止事件。

这样试试

$(function () {
    $("#sortable1, #sortable2").sortable({
        connectWith: ".connectedSortable",
        start: function (event, ui) {
            ui.item.data('parentID', ui.item.parent().attr("id"));
        },
        stop: function (event, ui) {
            var parentID = ui.item.data('parentID');
            if (ui.item.hasClass("ui-state-default")) {
                if (parentID !== ui.item.parent().attr("id")) {
                    ui.item.removeClass("ui-state-default");
                    ui.item.addClass("ui-state-highlight");
                }
            } else if (ui.item.hasClass("ui-state-highlight")) {
                if (parentID !== ui.item.parent().attr("id")) {
                    ui.item.removeClass("ui-state-highlight");
                    ui.item.addClass("ui-state-default");
                }
            }
            console.log(ui.item.parent().attr("id"));
        }
    }).disableSelection();
});

Fiddle

【讨论】：

这仅适用于 elem 从左到右移动，但不适用于 elem 从右到左移动。见http://jsfiddle.net/fo51dggo/2/
我有第二个问题，当你将元素移动到同一个块时，类也发生了变化，但这并不好，我的意思是当元素移动到同一个块时，类变得没有变化。
你能再告诉我一件事吗，我想存储第一个块的至少一个项目，而不是移动到第二个块。第一个块中至少有一个项目存储。怎么能这样？
嘿，这是所有项目从一个块移动到另一个块:(。我不想移动所有项目。第一个块存储任何一次不移动。
你想在两个区块中至少保留一个项目吗？还是只剩下块？

【解决方案2】：

您可以使用 stop 事件来处理类更改，

start: function (event, ui) {
        $currParent = ui.item.parent();
},
stop: function (event, ui) {
    if(!ui.item.parent().is($currParent)) ui.item.attr('class', ui.item.siblings().attr('class'))
}

Fiddle Demo

ui.item是代表当前拖动元素的jQuery对象。

完整代码：

$(function () {
    var $currParent;
    $("#sortable1, #sortable2").sortable({
        connectWith: ".connectedSortable",
        start: function (event, ui) {
            $currParent = ui.item.parent();
        },
        stop: function (event, ui) {
            if(!ui.item.parent().is($currParent)) ui.item.attr('class', ui.item.siblings().attr('class'))
        }
    }).disableSelection();
});

这会将ui-state-default 更改为ui-state-highlight，反之亦然。

【讨论】：

一个问题，当你将元素移动到同一个块时，类也会发生变化，但这并不好，我的意思是当元素移动到同一个块时，类不会改变。
啊，是的。更新了我的答案。不过，还有一种更有效的方法，使用 ui.sender 参考 -api.jqueryui.com/sortable/#event-stop。但由于某种原因，您的 jQuery UI 版本不支持此功能。

【解决方案3】：

使用在您放置可放置对象时执行的函数drop( event, ui )。您可以使用：

ui.item.addClass("ui-state-highlight");

在drop( event, ui ) 函数内部。更多信息请访问Droppable - Event Drop。

【讨论】：