jsPlumbを使用した要素のサイズ変更とドラッグ

Question

jsPlumbライブラリを使用して、要素をツールボックスからドラッグしてコンテナにドロップできる単純なインターフェイスを実装しています。ここでは、同時にサイズ変更とドラッグが可能な要素（ 'partitiondrop'）があります。ただし、次のコードではパーティションのサイズを変更できません。 jsPlumb.draggableがなければ、サイズ変更機能は機能しますが、要素がドロップされるとドラッグできません。

drop: function (e, ui) { 
    var dropElem = ui.draggable.attr('class'); 
    droppedElement = ui.helper.clone(); 
    ui.helper.remove(); 
    $(droppedElement).removeAttr("class"); 
    $(droppedElement).draggable({containment: "container"}); 
    jsPlumb.repaint(ui.helper); 

    var newAgent = $('<div>').attr('id', i).addClass('partitiondrop'); 
    $(droppedElement).draggable({containment: "container"}); 

    newAgent.css({ 
     'top': e.pageY, 
     'left': e.pageX 
    }); 

    $('#container').append(newAgent); 

    jsPlumb.draggable(newAgent, { 
     containment: 'parent'  
    }); 

    $(newAgent).resizable({ 
     resize : function(event, ui) { 
     jsPlumb.repaint(ui.helper); 
     } 
    }); 
} 

CSS partitiondropため、この点で

.partitiondrop { 
    border: 1px solid #346789; 
    resize: both; 
    overflow-x: hidden; 
    overflow-y: hidden; 
    ... 
    z-index: 20; 
    position: absolute; 
    ... 
    box-sizing: border-box; 
} 

提案が高く評価されます。

Answer 1

これにはinteract.js Javascriptライブラリを使用できます。これは、サイズ変更とドラッグを同時に行うための広範な関数ライブラリを提供します。

interact('.resize-drag') 
    .draggable({ 
    onmove: window.dragMoveListener 
    }) 
    .resizable({ 
    preserveAspectRatio: true, 
    edges: { left: true, right: true, bottom: true, top: true } 
    }) 
    .on('resizemove', function (event) { 
    var target = event.target, 
     x = (parseFloat(target.getAttribute('data-x')) || 0), 
     y = (parseFloat(target.getAttribute('data-y')) || 0); 
// update the element's style 
target.style.width = event.rect.width + 'px'; 
target.style.height = event.rect.height + 'px'; 

// translate when resizing from top or left edges 
x += event.deltaRect.left; 
y += event.deltaRect.top; 

target.style.webkitTransform = target.style.transform = 
    'translate(' + x + 'px,' + y + 'px)'; 

target.setAttribute('data-x', x); 
target.setAttribute('data-y', y); 
target.textContent = Math.round(event.rect.width) + '×' + Math.round(event.rect.height); 
});