Question

＆＃13;

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

＆＃13;

/*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;
}

＆＃13;

<!--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>

＆＃13;

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

EXA。从第一个li开始ul，将ul课程更改li ui-state-default移至ui-state-highlight。

你可以编辑成js小提琴 http://jsfiddle.net/fo51dggo/

Answer 1

可排序中有一种停止方法。改变那里的课程

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

试试这个

$(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

Answer 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，反之亦然。

Answer 3

使用删除droppable对象时执行的函数drop( event, ui )。您可以使用：

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

在drop( event, ui )功能中。有关详情，请访问Droppable - Event Drop。

jquery在可排序时更改类

3 个答案: