javascript - Jquery 可排序。在选中/拖动时调整 CSS

Question

使用 Jquery 可排序。我想做一个简单的 css 切换功能，以便我可以使用 css 类 <div class='bar-across' 将我选择的字段( .selected )的背景颜色从白色更改为黄色 bg (<div class="bar-across selected">)。当我释放鼠标/单击时，我希望它恢复到原来的状态。

Fiddle

HTML:

<div id="reorder-list">
  <div id="listItem_1" class="bar-across CF"><span class="handle">Drag</span>Item 1</div>
  <div id="listItem_2" class="bar-across CF"><span class="handle">Drag</span>Item 2</div>
  <div id="listItem_3" class="bar-across CF"><span class="handle">Drag</span>Item 3</div>
</div>

Javascript:

$(document).ready(function () {
    $("#reorder-list").sortable({
        placeholder: "destination",
        forcePlaceholderSize: true,
        handle: '.handle',
        update: function () {
            var order = $('#reorder-list').sortable('serialize');
            $("#info").load("billboard-sort.php?" + order);
        }
    });
});

CSS:

.bar-across {
    background:#fff;
    border:1px solid #ccc;
    margin-bottom:5px;
    width: 100%;
}
#reorder-list div .handle {
    cursor: move;
    padding:0;
    float:left;
    background:#0C6;
    padding: 10px;
}
.destination {
    background:#1c5dbb;
    width: inherited;
}
.selected {
    background:#FF0;
}
/* Clearfix
    ============================================================================ */

/* Clearfix */
 .CF:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.CF {
    display:inline-block;
}

Answer 1

查看 Sortable API 中的事件 start 和 stop .通过使用它们，您可以向当前拖动的元素添加或从中删除所需的类。可以通过

访问

$(ui.item).doStuff();

其中ui当然是事件回调参数的第二个