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

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

抓住可拖动项目的右边缘，并将其放置在可拖放项目的左边缘。即使鼠标明显位于可拖放元素内，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

---

我想，问题在于你的可放下设备。您正在使每个列表项成为可拖放项，而不是其父项

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

$（文档）.ready（函数（）{
函数日志（str）{
$（“#log”）.prepend（“+str+”）；
}
$（“.left li”）.draggable({
助手：“克隆”
});
$（“.right”）.droppable({
接受：'.left li'，
下拉：功能（ev、ui）{
log（'Drop-on:'+$（this.attr（“class”））；
变量项=$（“
”{
班级：“放弃”
}).html（ui.helper.text（））.appendTo（$（this））；
}
});
});

正如您在这里所看到的，

drop

是在一个项目落在

ul.right

上时触发的。如果需要，还可以调整

---

希望这能有所帮助。

我想问题在于您的可放下设备。您正在使每个列表项成为可拖放项，而不是其父项

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

$（文档）.ready（函数（）{
函数日志（str）{
$（“#log”）.prepend（“+str+”）；
}
$（“.left li”）.draggable({
助手：“克隆”
});
$（“.right”）.droppable({
接受：'.left li'，
下拉：功能（ev、ui）{
log（'Drop-on:'+$（this.attr（“class”））；
变量项=$（“
”{
班级：“放弃”
}).html（ui.helper.text（））.appendTo（$（this））；
}
});
});

正如您在这里所看到的，

drop

是在一个项目落在

ul.right

上时触发的。如果需要，还可以调整

希望有帮助

$(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));
    }
  });
});