Interactjs拖放 - 不能在重叠的下拉区之间插入

Question

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

$('.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);