Question

我写了一些：http://jsfiddle.net/py3DE/203/但是当元素被拖入适当的容器时，我们可以通过将其他div拖入其区域来覆盖它。你能告诉我如何阻止被拖动的元素，如果有人试图覆盖任何元素，div会返回到带有未分割的div的区域吗？

if (!ui.draggable.closest('.empty').length) item = item.draggable()'

Answer 1

有一种简单的方法可以做到这一点。基本上，我们会移除课程empty并使用disable方法。

工作示例：http://jsfiddle.net/Twisty/5rdxmp4p/

次要CSS更改

.filled .item .closer {
  display: block;
}

投放功能

  drop: function(ev, ui) {
    if ($(this).hasClass("empty")) {
      $(this).removeClass("empty").addClass("filled");
      $(this).droppable("disable");
    } else {
      return false;
    }
    var item = ui.draggable;
    if (!ui.draggable.closest('.empty').length) item = item.draggable(); // if item was dragged from the source list - clone it
    this.innerHTML = ''; // clean the placeholder
    item.css({
      top: 0,
      left: 0
    }).appendTo(this); // append item to placeholder
  }

交换课程可以显示X按钮。然后，我们运行disable方法以确保此特定项目不再接受拖动的项目。如果用户将项目拖动到此位置，则会将其恢复。

<强>更新

使用Sortable：http://jsfiddle.net/Twisty/5rdxmp4p/2/

<强> HTML

<div id="dragItems" class="source">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
</div>
<div id="sortItems" class="target">
</div>

<强> CSS

body {
  background: #fff;
}

.source,
.target {
  margin: 20px;
  min-height: 190px;
  width: 400px;
  border: 1px solid green;
}

.target {
  border: 1px solid blue;
}

.item {
  height: 20px;
  margin: 5px;
  padding: 5px;
  border: 1px solid gray;
  background-color: #cd8;
  position: relative;
}

.closer {
  float: right;
  width: 20px;
  height: 20px;
  border: 0;
  background-color: transparent;
}

.closer:hover {
  background-color: transparent;
  border: 0;
}

.empty {
  height: 30px;
  margin: 5px;
  background: #eee;
  border: 1px dashed #999;
}

.highlight {
  border: 1px solid red;
  background: #fff;
}

.highlight .item {
  opacity: 0.3;
}

.ui-draggable-dragging {
  z-index: 99;
  opacity: 1 !important;
  width: 378px;
}

<强>的jQuery

$(function() {
  $("#sortItems").sortable({
    axis: "y",
    items: "> div",
    placeholder: "empty",
    dropOnEmpty: true,
    stop: function(e, ui) {
      var $it = ui.item;
      if ($it.find(".closer").length == 0) {
        var closeBtn = $("<span>", {
          class: "closer"
        });
        $it.append(closeBtn);
        closeBtn.button({
          icon: "ui-icon-close",
          label: "Close",
          showLabel: false
        }).click(function(ev) {
          console.log("[INFO]: Closing ", $it);
          $it.fadeTo(200, 0.0, function() {
            $it.remove();
            $("#sortItems").sortable("refresh");
          });
        });
      }
    }
  });

  $("#dragItems .item").draggable({
    connectToSortable: "#sortItems",
    revert: "invalid"
  });

  $("#sortItems").disableSelection();
});

jQuery UI可拖动锁定div

1 个答案: