Question

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

小部件存储在页面中绝对定位的div中（左侧，z-index：1） droppables区域位于页面中的另一个div中。

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

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

Answer 2

试试这段代码..

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

jQuery UI Droppable，不要在特定DIV上传播事件

HTML

CSS

JS

2 个答案: