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.

希望对您有所帮助。