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

Posted 2023-05-08

【中文标题】jQuery-UI：即使鼠标在放置区域内，拖放有时也不起作用

【英文标题】：jQuery-UI: Drag and Drop sometimes not working eventhough mouse is inside drop area

【发布时间】：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;

【参考方案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。

希望对您有所帮助。