复杂的拖放 jquery UI

Intricate drag and drop jquery UI

本文关键字：UI jquery 拖放 复杂      更新时间：2023-09-26

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

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

在右侧，我有一个固定的元素列表，称为 #userList .此元素必须设置为 overflow： auto，因为用户元素的数量是可变的。然后我需要将副本拖到拖放区，该副本的大小也可以变化，因此它的容器也必须设置为溢出自动。我需要容器在拖动元素拖动到边缘时自动滚动，以允许用户将元素放置在拖放区的任何位置。到目前为止，我最好的主意是先附加到正文以逃避原始的自动溢出容器，然后附加到droppable({over:})上的#dropzone。但这并没有真正奏效。有没有 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');
        },
    });
});

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

这有点笨拙，但它可以做你想做的事情。

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放置区容器
  • tVP目标视口偏移量（以{ top, left }为单位
    • ）
  • tW & tH目标的宽度和高度
  • scrInc我们将用于增加或减少滚动位置
    • 的值
  • pad用作边缘检测的像素量tVP
  • x0和x1是tVP的顶部边缘和底部边缘
  • y0和y1是左边缘和右边缘tVP

我在这些功能之外定义了tEntered，因此我可以从可拖动或可拖放访问它。由于可放置具有 over 和 out ，我们可以使用这些值来更改此值。

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

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

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

相关文章：