javascript - Interactjs 拖放 - 无法在重叠的放置区之间放置

Question

我正在尝试在其匹配模板上放置一个形状。模板由多个形状组成，这些形状连接在一起以创建一个图形。在某些图中，我无法将我的目标放入其匹配模板中，因为它与相邻的放置区重叠(请参阅附图)。我不能落在两个绿色区域之间的红色三 Angular 形上。

function setupDropzone(el, accept) {
    interact(el)
	  .dropzone({			            	
	      accept: accept,
	      overlap: 'pointer',
	      ondropactivate: function (event) { },
		  ondropdeactivate: function (event) {}
	  })
}

Answer 1

我找到了一个解决方案。计算所有放置区域中心之间的距离，并在“dragmove”回调中拖动 div，并将一个类添加到最近的放置区域。然后，使用“dynamicdrop”属性激活所需的放置区。这个过程随着 dragmove 不断发生。

$('.allowDrop').removeClass('allowDrop');
    var distArr = [];
    var elemPos = event.target.getBoundingClientRect();
    var elemCenter = {};
    elemCenter.x = (elemPos.top + elemPos.bottom)/2;
    elemCenter.y = (elemPos.left + elemPos.right)/2;
    $('.js-drop').each(function(index, el) {                
        var dropPos = el.getBoundingClientRect();
        var dropCenter = {};
        dropCenter.x = (dropPos.top + dropPos.bottom)/2;
        dropCenter.y = (dropPos.left + dropPos.right)/2;
        var distance = Math.sqrt(Math.pow((elemCenter.x - dropCenter.x),2) +
                                 Math.pow((elemCenter.y - dropCenter.y),2));
        distArr.push(distance);                         
   })
   var minDist = Math.min.apply( Math, distArr );
   var index = distArr.indexOf(minDist);
   $($('.js-drop')[index]).addClass('allowDrop');

   // setup drop areas.
   setupRemoveZone('.removeShape', '.js-drag');
   setupDropzone('.allowDrop', '.js-drag');
   interact.dynamicDrop(true);