如何限制拖動元素在interact.js中重疊

Question

容器中的拖動元素不應該重疊，我們可以如何限制。 請幫助

interact API link

Answer 1

對不起，這不是越早回答。我相信你必須手動檢查元素上，下，左，右邊緣的位置，所以這裏是我做過什麼：

//Call this function from within your .on('dragmove') method. 
//It should replace your translations. 

function noOverlap(event, overlapElements){ 

    //just for flagging when the target would overlap another element 
    var overlap = false; 
    var targetDims = event.target.getBoundingClientRect(); 

    for(i = 0; i < overlapElements.length; i++){ 
     var overlapElementDims = 
     overlapElements[i].getBoundingClientRect(); 

     //make sure the element doesn't look at itself.. 
     if(overlapElements[i] != event.target){ 
      //checks if the target "doesn't" overlap 
      if(((targetDims.right + dx) < (overlapElementDims.left + 1)) 
      ||((targetDims.left + 1 + dx) > (overlapElementDims.right)) 
      ||((targetDims.top + 1 + dy) > (overlapElementDims.bottom)) 
      ||((targetDims.bottom + dy) < (overlapElementDims.top + 1))}{ 

      //Basically, the target element doesn't overlap the current 
      //element in the HTMLCollection, do nothing and go to the 
      //next iterate 
      } 
      else{ 
       //This is if the target element would overlap the current element 

       //set overlap to true and break out of the for loop to conserve time. 

       overlap = true; 
       break; 
      } 
     } 
    }; 

    if(overlap === false){ 

     //if there's no overlap, do your normal stuff, like: 
     event.target.x += dx; 
     event.target.y += dy; 

     event.target.style.webkitTransform = 
      event.target.style.transform = 
       'translate(' + event.target.x + 'px, ' + event.target.y + 'px)'; 

     //then reset dx and dy 
     dy = 0; 
     dx = 0; 
    } 
    else{ 
     if(event.interaction.pointers[event.interaction.pointers.length - 1].type 
     === "pointerup"){ 

      //check if the target "is" in the restriction zone 
      var restriction = 
      interact(event.target).options.drag.restrict.restriction; 
      var restrictionDims = restriction.getBoundingClientRect(); 

      if((targetDims.right > restrictionDims.right) || 
      (targetDims.left < restrictionDims.left) || 
      (targetDims.bottom > restrictionDims.bottom) || 
      (targetDims.top < restrictionDims.top)){ 
       event.target.style.webkitTransform = 
       event.target.style.transform = 
        'translate(0px, 0px)'; 

       //then reset dx and dy 
       dy = 0; 
       dx = 0; 

       //then reset x and y 
       event.target.x = 0; 
       event.target.y = 0; 
      } 
     }  
    } 
}