javascript – 包含可拖动到多个元素

2023年3月19日 161次阅读

我为网站编写了一个用户脚本,该脚本包含一个可拖动的jQuery UI.大大简化,该网站有两行,每行有两个水平放置的div.

站点布局以前使用了两列内部div而不是行. draggable被限制在右列的父级,这正是我们想要的.但是,现在没有办法约束到正确的“列”,因为DOM中不再存在该列.

有没有办法流畅地将可拖动的div包含到没有旧的父元素的div的右列？如果需要,我可以向DOM添加元素(或做任何事情),我们可以使用jQuery和jQuery UI的全部功能.我知道可以在右上角使用一个droppable,但据我所知,这将导致拖动器在两者之​​间捕捉.如果这是唯一的选择,那么我会这样做,但如果有另一种方法,我很乐意看到它.

FIDDLE

<div id="outercontainer">
  <div id="toprow">
    <div id="topleft"></div>
    <div id="topright"></div>
  </div>
  <div id="bottomrow">
    <div id="bottomleft"></div>
    <div id="bottomright"></div>
  </div>
</div>

<div id="dragme"></div>

最佳答案 约束位置中使用的实际包含值是一个坐标数组,它是根据您在选项本身中设置的对象计算的.但是您可以在可拖动的实例上访问此包含属性并根据需要进行修改.唯一的限制是它需要是一个矩形,你不能混合形状.

在您的情况下,您可以简单地计算元素的坐标.

$("#dragme").draggable({
  // You still need to set a value for containment
  // else it won't be checked when evaluating the position
  containment: 'document',
  start: function(e, ui) {
    // You simply set a left, top, right, bottom coordinates.
    // You need to set it on start so if the elements have been
    // resized, the containment follows.
    var cont = [
      $('#topleft').offset().left + $('#topleft').outerWidth(),
      $('#toprow').offset().top,
      $('#toprow').offset().left + $('#toprow').outerWidth() - ui.helper.width(),
      $('#bottomrow').offset().top + $('#bottomrow').outerHeight() - ui.helper.height(),
    ]

    $(this).draggable('instance').containment = cont;
  }
});

https://jsfiddle.net/nxxbh8eL/

点赞