Jquery 可排序的。在选定/拖动上调整 CSS答案

【问题标题】：Jquery Sortable. Adjusting CSS on Selected / DragJquery 可排序的。在选定/拖动上调整 CSS
【发布时间】：2014-11-10 01:57:14
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery html css jquery-ui-sortable

【解决方案1】：

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

访问

$(ui.item).doStuff();

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

【讨论】：