Interactjs拖放 - 不能放在重疊的下拉列表之間

我正在嘗試在其匹配模板上放置一個形狀。模板由多個形狀連接在一起組成一個圖形。在某些圖中，我無法將我的目標放入其匹配的模板中，因爲它與相鄰的下拉區重疊（請參閱附圖）。我不能放在兩個綠色區域之間的紅色三角形上。Interactjs拖放 - 不能放在重疊的下拉列表之間

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 }) 
 
}

來源

2016-08-27 Achal Jain

我找到了一個解決方案。計算所有放置區域的中心之間的距離，並在'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);

來源

2016-09-06 10:15:03

Interactjs拖放 - 不能放在重疊的下拉列表之間

回答

相關問題