jQuery UI 可丢弃，不通过特定 DIV 传播事件

Question

我正在开发一个界面，用户可以在该界面中将 "widgets" 拖放到页面的 "droppable zones" 上。

小部件存储在页面中的 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

试试这个代码..

$('#left .dragMe').draggable({
       refreshPositions: true
});

Answer 2

问题不在 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

jQuery UI 可丢弃，不通过特定 DIV 传播事件

jQuery UI Droppable, do not propagate event over specific DIV

javascript

jquery

jquery-ui

event-propagation

HTML

CSS

JS