jQuery-UI：即使鼠标在放置区域内，拖放有时也不起作用答案

【问题标题】：jQuery-UI: Drag and Drop sometimes not working eventhough mouse is inside drop areajQuery-UI：即使鼠标在放置区域内，拖放有时也不起作用
【发布时间】：2019-12-11 03:55:50
【问题描述】：

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

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;
}

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

【解决方案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));
    }
  });
});

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

希望对您有所帮助。

【讨论】：