javascript - jQuery-UI:即使鼠标位于放置区域内，拖放有时也不起作用

Question

我创建了一个列表，可以将其中的项目拖放到另一个列表的项目中。问题是有时当项目被拖动到可放置项目的边缘并将其放置在可放置项目的边缘时，即使鼠标位于可放置项目内部，也不会发生任何事情。有没有办法改善这一点？

Fiddle example捕获可拖动项目的右边缘并将其放在可放置项目的左边缘上。尽管鼠标显然位于可放置元素内，但 console.log 未注册

jquery

$( ".left li" ).draggable({
    helper: 'clone'
});
$( ".right li" ).droppable({
    accept: '.left li',
    drop: function(ev, ui){
    console.log('dropped inside right li')
  }
});

html

<ul class="left">
  <li>drag1</li>
  <li>drag2</li>
  <li>drag3</li>
  <li>drag4</li>
  <li>drag5</li>
</ul>
<ul class="right">
  <li>drop1</li>
  <li>drop2</li>
  <li>drop3</li>
  <li>drop4</li>
  <li>drop5</li>
</ul>

CSS

.left {
  float:left;
}

.left li {
  width: 100px;
  height: 30px;
  border: 1px solid black;
}

.right {
  float:right;
}

.right li {
  width: 100px;
  height: 30px;
  border: 1px solid black;
}

Answer 1

我怀疑问题出在你的 droppable 上。您将每个列表项设置为可放置项，而不是其父项。

http://jsfiddle.net/Twisty/1ofa25zx/

JavaScript

$(document).ready(function() {
  function log(str) {
    $("#log").prepend("<div>" + str + "</div>");
  }
  $(".left li").draggable({
    helper: 'clone'
  });
  $(".right").droppable({
    accept: '.left li',
    drop: function(ev, ui) {
      log('Drop on: ' + $(this).attr("class"));
      var item = $("<li>", {
        class: "dropped"
      }).html(ui.helper.text()).appendTo($(this));
    }
  });
});

正如您在此处看到的，当项目落在 ul.right 上时，会触发 drop。如果需要，您还可以调整tolerance .