复杂的拖放 jquery UI

Question

更新：这是最后的小提琴。 谢谢扭扭。 https://jsfiddle.net/natjkern/55n1Lg61/14/

这是我的网站http://jsfiddle.net/natjkern/pjq9wqLy/ 的一个模型

在右侧，我有一个固定的元素列表，称为#userList 。 此元素必须设置为 overflow: auto，因为用户元素的数量是可变的。 然后我需要将一个副本拖到 dropzone 中，它的大小也可以不同，因此它的容器也必须设置为自动溢出。 当拖动的元素被拖动到边缘时，我需要容器自动滚动，以允许用户将元素放置在放置区中的任何位置。 到目前为止，我最好的想法是先附加到 body 以转义原始自动溢出容器，然后附加到#dropzone on droppable({over:}) 。 但这真的行不通。 有没有 UI 专家可以帮我一把？ 到目前为止，这是我的代码：

$(document).ready(function () {
    $('.moveMe').draggable({
        helper: "clone",
        appendTo: 'body',
        revert: 'invalid',
        scroll: true,

    });
    $('#dropZone').droppable({
        accept: '.moveMe',
        //here is where my problem arrises
        // I need #dropZoneCon to scroll to place 

        over: function (event, ui) {
            ui.helper.draggable.detach().appendTo($(this));
            $('#DropZone div').css('position','absolute');
            ui.helper.draggable.draggable('option', 'containment', 'parent');
        },
    /*    */
        drop: function (event, ui) {
            ui.helper.draggable.detach().appendTo($(this));
            $('#DropZone div').css('position','absolute');
            ui.helper.draggable.draggable('option', 'containment', 'parent');
        },
    });
});

注意：注释掉：允许我将元素放置在我想要的位置，但我确实需要滚动才能工作。

Answer 1

这有点笨拙，但它可以完成您想要做的事情。

http://jsfiddle.net/Twisty/55n1Lg61/5/

查询

$(document).ready(function() {
  var tEntered = false;
  $('.moveMe').draggable({
    helper: "clone",
    appendTo: 'body',
    revert: 'invalid',
    drag: function(e, u) {
      var curPos = u.offset;
      var $target = $("#dropZoneCon");
      var tVP = $target.offset();
      var tW = Math.floor($target.width());
      var tH = Math.floor($target.height());
      var pad = 20;
      var scrInc = 10;
      var x0 = tVP.top;
      var x1 = tVP.top + tH;
      var y0 = tVP.left;
      var y1 = tVP.left + tW;
      $("#dragInfo").html("Over #dropZone: " + tEntered + ", top: " +
        tVP.top + "/" + curPos.top + "/" + x1 + " left: " + tVP.left + "/" + curPos.left + "/" + y1);
      if (tEntered) {
        // Increase Scroll
        if (curPos.left >= (y1 - pad) && curPos.left <= y1) {
          $target.scrollLeft($target.scrollLeft() + scrInc);
        }
        if (curPos.top >= (x1 - pad) && curPos.top <= x1) {
          $target.scrollTop($target.scrollTop() + scrInc);
        }
        // Decrease Scroll
        if (curPos.left >= y0 && curPos.left <= (y0 + pad)) {
          $target.scrollLeft($target.scrollLeft() - scrInc);
        }
        if (curPos.top >= x0 && curPos.top <= (x0 + pad)) {
          $target.scrollTop($target.scrollTop() - scrInc);
        }
      }
    }
  });
  $('#dropZone').droppable({
    accept: '.moveMe',
    over: function(e, u) {
      tEntered = true;
    },
    out: function(e, u) {
      tEntered = false;
    },
    drop: function(event, ui) {
      ui.draggable.detach().appendTo($(this));
      $('#DropZone div').css('position', 'absolute');
      ui.draggable.draggable('option', 'containment', 'parent');
    },
  });
});

所以我们在drag事件中做了很多繁重的工作，因为我们可以从这个事件中确定拖动对象的位置。 在拖动事件中，我们定义了许多变量：

• curPos我们的可拖动对象在{ top, left }的当前位置
• $target dropZone 容器
• tVP { top, left }的目标视口偏移
• tW & tH目标的宽度和高度
• scrInc一个我们将用来增加或减少滚动位置的值
• pad用作tVP边缘检测的tVP
• x0 & x1是tVP顶边和底边
• y0 & y1是tVP左边缘和右边缘

我在这些函数之外定义了tEntered ，所以我可以从draggable 或droppable 访问它。 由于 droppable 有over和out ，我们可以使用它们来更改此值。

现在，当tEntered为真时，这意味着我们将一个对象拖到目标上方，我们会查看x和y是否可能在我们的填充内。 如果是，我们增加或减少滚动位置。

我发现这很有帮助： http : //www.jqwidgets.com/community/topic/how-detect-area-dropped-inside-a-div-into-another-div/

这应该允许你做你想做的，除非我误解了。 如果您有问题，请发表评论。