如果没有超出元素，则禁用 Drop 功能

Question

基本上，我尝试使用 jquery 可拖动小部件将可拖动元素放入可拖动元素中，但是当可拖动元素与可拖动元素位于同一行时，会调用可拖动元素的放置函数，只有当可拖动元素超过可放置元素时才会被调用。

这是一个link到完整代码https://jsfiddle.net/AdokiyePaul/5z41se6h/4/

下图描述了错误，黑线说明了可拖动元素，并表明即使可拖动元素不在其上方，可放置元素仍然突出显示。

这是使用的jquery函数

      $(function () {
   // var zoom = $("#articles").css("zoom");

    $(".article").draggable({
      revert: 'invalid',
      zindex: 1000,
      appendTo: "body",
      containment: "window",
      cursorAt: {
        // top: 200,
        // left: 50
      },
      scroll: false,
      helper: "clone",
      start: function (event, ui) {
        offset_start = {
          x: ui.position.left - event.pageX,
          y: ui.position.top - event.pageY,
        };

        //     var factor = 1 / zoom - 1;

        ui.position.top += Math.round(
          ui.position.top - ui.originalPosition.top
          //* factor
        );
        ui.position.left += Math.round(
          ui.position.left - ui.originalPosition.left
          //* factor
        );
        $(ui.helper).addClass("article-dragging");
      },
      stop: function (event, ui) {
        $(ui.helper).removeClass("article-dragging");
      },
      drag: function (event, ui) {
        // ui.position.top = event.pageY + offset_start.y;
        // ui.position.left = event.pageX + offset_start.x;

        ui.position.top =
          event.pageY - $(".article-dragging").outerHeight() / 2;
        ui.position.left =
          event.pageX - $(".article-dragging").outerWidth() / 2;
      },
    });
    $("#folders li").droppable({
        accept: "div.article",
       hoverClass: "over",
      drop: function (event, ui) {
    ui.draggable.detach().appendTo($(this));
      },
      
    });
    
  });

Answer 1

考虑以下因素。

 $(function() {
   console.log('dkdk')
   $(".article").draggable({
     appendTo: "body",
     revert: 'invalid',
     zindex: 1000,
     containment: "window",
     scroll: false,
     helper: function(event) {
       var $el = $(event.target).closest(".article");
       return $("<div>", {
         class: "article article-dragging"
       }).html($el.children().clone()).position({
         my: "center",
         at: "center",
         of: event
       });
     }
   });
   $("#folders li").droppable({
     accept: "div.article",
     hoverClass: "over",
     drop: function(event, ui) {
       ui.draggable.detach().appendTo($(this));
     },
   });
 });

示例：https://jsfiddle.net/Twisty/pf1xnet6/32/

我发现定位导致了很多奇怪的问题。我也在 clone 中看到了这些，所以我刚刚创建了一个包含正确项目的新元素并将其用作助手。

如果没有超出元素，则禁用 Drop 功能

Disable Drop function if not over element

javascript

jquery

jquery-ui