Interactjsドラッグアンドドロップ - 重複するドロップインの間にドロップできない

Question

一致するテンプレートにシェイプをドロップしようとしています。テンプレートは、複数の図形を結合して図形を作成します。一部の図では、ターゲットが隣接するドロップゾーンと重なっているため、一致するテンプレートにターゲットをドロップできません（添付の画像を参照）。私は2つの緑色のゾーンの間に赤い三角形の上にドロップすることはできません。

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

Answer 1

私は、このための解決策を見つけました。 「dragmove」コールバック内のすべてのドロップエリアとドラッグdivの中心間の距離を計算し、最も近いドロップエリアにクラスを追加します。 次に、 '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);