javascript - jQuery UI Droppable，不通过特定 DIV 传播事件

Question

我正在开发一个界面，用户可以将“小部件”放置在页面中的“可放置区域”上。

小部件存储在页面中绝对定位的 div 中(位于左侧，z-index:1)可放置区域位于页面的另一个 div 中。

问题是:当我将一个小部件从左列拖动到页面中的可放置区域时，即使通过左列 div 也可以捕获可放置事件。我想在用户拖动左列时停止可放置事件，但在用户离开左列时保留该事件。

HTML

<div id="left">
  <div class="dragMe">Drop me on Yellow</div>
  <div class="dragMe">Drop me on Yellow</div>
  <div class="dragMe">Drop me on Yellow</div>
  <div class="dragMe">Drop me on Yellow</div>
</div>

<div id="right">
  <div class="dropOnMe"></div>
  <div class="dropOnMe"></div>
  <div class="dropOnMe"></div>
  <div class="dropOnMe"></div>
  <div class="dropOnMe"></div>
  <div class="dropOnMe"></div>
</div>

CSS

#left {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 220px;
  z-index: 1;
  background-color: gray;
  padding: 10px;
}

.dropOnMe {
  width: 500px;
  height: 200px;
  display: inline-block;
  background-color: yellow;
}

.dragMe {
  height: 20px;
  width: 200px;
  margin-bottom: 5px;
  border: 1px solid red;
  font-size: 13px;
  background-color: white;
  text-align: center;
  cursor: move;
  font-family: tahoma;
}

.ui-droppable-hover {
  outline: 3px solid red;
}

JS

$(function() {

  $('#left .dragMe').draggable(
    {
      helper: 'clone',
      opacity: 0.5,
      appendTo: 'body',
      zIndex: 11
    }
  );

  $('#right .dropOnMe').droppable(
    {
        drop: function( event, ui ) {

          console.log(event);

        }
      }
    );

});

检查示例:http://jsbin.com/judajucuxu/1/edit?html,output

有什么想法吗？

谢谢。

Answer 1

问题不在于 JavaScript 代码中。问题出在您的 CSS 中。

您的左侧始终是可放置区域的一部分，因为绝对定位。

如果你在这个 example 中修复它就可以了.

#left {
      position: relative;
}

此外，我不建议使用 jQuery UI 库，因为所有当代浏览器都有 HTML Drag and Drop API .

编辑1:

您还可以将右侧移动到左侧容器的宽度上，以防止交互:

#right{
    margin-left: 230px;
}

编辑2:

一旦你说你不能改变 HTML，你也可以做一些奇特的事情。

尝试检测光标偏移并确定是否准备好删除元素:

drop: function( event, ui ) {
     if (event.pageX > $('#left').width() + 100) {
         console.log(event);
     }
}

Example