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

Question

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

​

​

​

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

​

Answer 1

我找到了解决这个问题的办法。计算所有drop区域中心之间的距离，并在'dragmove‘回调中拖动div，并将类添加到最近的drop区域。然后，使用“dynamicdrop”属性激活所需的dropzone。使用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);