Question

我有一个带有draggable / droppable元素的页面，一旦丢弃，需要计算它们可能正在触摸的其他可拖动的左侧位置和宽度。

这本身并不太难，但我真正遇到麻烦的是让他们填补空白空间。如何让拖拽空间填满空位而不会相互叠加？

// $t is the element being added/dropped. 
// nd refers to New Dimensions, IE, the new dimensions for $t
// existingDivs gets any DIV's that have already been added to the dom
var $t = $(this), nd = {t:$t.position().top, h:$t.height(), l: 0, w: 95},
  existingDivs = $('#container .subContainer .draggable'), intersectArr = [],
  nonIntersectArr = [], finalArr = [];

// If there are no DIV's in the DOM you dont need to check if they intersect.
if (existingDivs.length > 0) {
// Find the DIV's that Intersect with the one being added
  intersectArr = $.grep(existingDivs, function(val,num){
    // xd is Existing Dimensions, for the current item being checked
    // verse the one being added.
    var $t2 = $(val), xd = {h:$t2.height(), w:parseFloat($t2.css('width')),
    l:parseFloat($t2.css('left')), t:$t2.position().top};
    // If they intersect add it to this array
    return ((xd.t <= nd.t && xd.t+xd.h > nd.t) ||
    (nd.t <= xd.t && nd.t+nd.h > xd.t));
  });
// Find the DIV's that DO NOT Intersect with the one being added
  nonIntersectArr = $.grep(existingDivs, function(val,num){
    // xd is Existing Dimensions, for the current item being checked
    // verse the one being added.
    var $t2 = $(val), xd = {h:$t2.height(), w:parseFloat($t2.css('width')),
    l:parseFloat($t2.css('left')), t:$t2.position().top};
    // If they DO NOT intersect add it to this array
    return ((xd.t > nd.t && xd.t > nd.t+nd.h) ||
    (nd.t > xd.t && nd.t > xd.t+xd.h));
  });
// For every element that does not intersect, check it verse the ones that do
  $(nonIntersectArr).each(function(){
    // nid is Non Intersecting Dimensions
    var $t2 = $(this), c = 0, nid = {h:$t2.height(),
    w:parseFloat($t2.css('width')),
    l:parseFloat($t2.css('left')), t:$t2.position().top};
    $(intersectArr).each(function(){
    // id is Intersecting Dimensions
      var $t3 = $(this), id = {h:$t3.height(), w:parseFloat($t3.css('width')),
      l:parseFloat($t3.css('left')), t:$t3.position().top};
    // if the non intersecting hits one that is intersecting, then there is no space
    // beneath/near it, so we add it to the final intersecting array then increment c
      if((id.t <= nid.t && id.t+id.h > nid.t) ||
      (nid.t <= id.t && nid.t+nid.h > id.t)){ finalArr.push(this); c++; }
      else { finalArr.push(this); }
    });
    // if c has been incremented, we cant use this nonIntersect, so add it to the final
    if(c > 0) { finalArr.push(this); }
  });
  // make sure all items in the final Array are unique
  finalArr = $.unique(finalArr);
  // iterate over the final array, processing the dimensions of each element in the
  // array layering them so you can see each one
  $(finalArr).each(function(num){
    // xd is Existing Dimensions, for the current item being checked
    // verse the one being added.
    var $t2 = $(this), xd = {h:$t2.height(), w:parseFloat($t2.css('width')),
    l:parseFloat($t2.css('left')), t:$t2.position().top};
    if(((xd.t <= nd.t && xd.t+xd.h > nd.t) ||
    (nd.t <= xd.t && nd.t+nd.h > xd.t))) {
      if(nd.l == xd.l){
        nd.w = ((95/(finalArr.length+1))*1.5);
        xd.l = ((nd.w)*(num));
        $(finalArr).each(function(ci){
          $(this).css({left:((nd.w*ci)*0.58)+'%',
          width:((95/(finalArr.length+1))*1.5)+'%'});
          nd.l = ((nd.w*ci)*0.58);
        });
      }
    }
  });
}
// Add the New Element to the container and position accordingly.
nd.l = ((nd.l/finalArr.length)*(finalArr.length+1))+'%';
nd.w = nd.w+'%';
$('#container .subContainer').append('<div style="top:'+nd.t+'px;left:'+nd.l+
';width:'+nd.w+';height:'+nd.h+'px;" class="dragId_'+$t.attr('id')+
' draggable"><div class="title">'+$t.attr('title')+'</div></div>');

任何建议/帮助将不胜感激。感谢。

Answer 1

以下是您需要做的算法：

当有形状接触时，找出最接近另一个形状的最右边的形状（具有最大右x坐标的形状）。移动它，使其左边缘恰好是它刚刚接触的最右边的形状。
虽然有些形状不在它们左边的东西旁边，但要找出左边x坐标最小的形状，它不在它左边的东西旁边。移动它，使其左边缘恰好位于具有最大右x坐标的形状的右边，该坐标位于对象的y范围内。

够简单吗？嗯，这是简化版本：

虽然有相互接触的形状，但是移动最右边的形状，使其不接触任何其他形状。
虽然有些形状没有相互依偎，但是移动最左边的形状，使它依偎在最近的形状上。

编辑：例如......

假设我拿了正方形3并将其放在方形1和方形2的顶部：

步骤1.找到与某事物相交的最右边的形状。在这种情况下，那是形状2.向右移动它的相交。

现在有形状接触吗？是的，最右边的是形状3.向右移动它接触的形状，形状1：

现在有形状接触吗？是的，最右边的是形状2.向右移动它接触的形状，形状3：

现在有形状接触吗？不，所以我们已经完成了第1步。

步骤2：找到最不合身的最左边的形状。在这种情况下，最左边的一个没有依偎到任何东西的是形状4.向左移动它就在它左边最右边的形状的右侧，它存在于与它相同的y坐标处：

有什么东西没有依偎在什么东西上吗？不！所以你已经完成了！

如您所见，基本上存在扩张阶段和收缩阶段。您从右到左进行扩展阶段，以便不会通过其他任何内容进行扩展。你从左到右进行收缩阶段，这样就不会通过别的东西收缩了。

使用jQuery分层交叉元素

1 个答案: