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拖放 - 不能放在重叠的下拉列表之间

回答

相关问题