Question

我有一个非常简单的网站，我希望能够在两个DIV容器之间拖放一些样式化的DIV元素。我已经使用JQueryUI的可排序函数来成功实现拖放行为，如下所示：

$("#active-container").sortable({connectWith: "#inactive-container"});
$("#inactive-container").sortable({connectWith: "#active-container"});

我使用此方法在按钮单击时将可放置的DIV元素添加到容器中：

function createDeviceDiv (deviceObject, className){

  var div = document.createElement('div');

  div.id = deviceObject.deviceId;

  div.className = className + ' draggable="true"';

  div.textContent = deviceObject.deviceName;

  return div;
}

我的CSS看起来像这样：

.active-device-element
{
  width: 200px;
  height: 40px;
  border: 2px solid #666666;
  margin: 10px;
  background-color: lightgreen;
  cursor: move;
  border-radius: 25px;
  text-align: center;
  vertical-align: middle;
  line-height: 35px; 
  -webkit-user-select: none; 
}

.inactive-device-element
{
  width: 200px;
  height: 40px;
  margin: 10px;
  border: 2px solid #666666;
  background-color: floralwhite;
  cursor: move;
  border-radius: 25px;
  text-align: center;
  vertical-align: middle;
  line-height: 35px; 
  -webkit-user-select: none; 
}

#active-container, #inactive-container
{
  background-color: lightgrey;
  min-height: 100px;
}

index.html页面的相关部分（使用Twitter bootstrap 3）如下：

<div class="row">
    <div class="col-xs-6">
        <h2>Active Devices</h2>
        <p>The following devices are currently listed as active.</p>
        <div id="active-container">
        </div>
    </div>
    <div class="col-xs-6">
        <h2>Inactive Devices</h2>
        <p>The following devices are currently listed as inactive.</p>
        <div id="inactive-container">
        </div>
    </div>
</div>

因此，在两个容器之间拖放效果很好。但是，在删除时，元素将保留原始样式。我需要突出显示通过更改任何已拖放到不同背景颜色/样式的元素所做的更改，因此基于我的CSS，类似于＆＃39; .modified-device-element＆＃39;。我不清楚实现这一目标的最佳方法是什么。

非常感谢任何帮助。

Answer 1

jQuery UI Sortable有几个你可以使用的事件，其中一个是receive。您可以设置事件侦听器以获取两个容器的更新。然后，当项目从一个容器移动到另一个容器时，您可以获得该项目并根据需要进行修改，包括添加另一个类。

$('#active-container, #inactive-container').on('sortreceive', function(event, ui) {
    ui.item.addClass('modified-device-element');
});

或设置小部件

$('#active-container').sortable({
    receive: function(event, ui) {
        ui.item.addClass('modified-device-element');
    }
});

$('#inactive-container').sortable({
    receive: function(event, ui) {
        ui.item.addClass('modified-device-element');
    }
});

如何使用JqueryUI可排序更改已删除元素的样式？

1 个答案: