jsPlumb을 사용하여 요소 크기 조정 및 끌기

Question

jsPlumb 라이브러리를 사용하여 요소를 도구 상자에서 끌어 컨테이너로 떨어 뜨릴 수있는 간단한 인터페이스를 구현하고 있습니다. 여기에는 동시에 크기와 드래그 가능한 요소 ('partitiondrop')가 있습니다. 그러나 다음 코드에서는 파티션 크기를 조정할 수 없습니다. jsPlumb.draggable이 없으면 크기 조정 기능이 작동하지만 일단 요소를 놓으면 끌 수 없습니다. 이 점에서 partitiondrop

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

제안에 대한

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는 높게 평가 될 것입니다.

Answer 1

interact.js 자바 스크립트 라이브러리를 사용할 수 있습니다. 크기 조정과 드래그를 동시에 수행 할 수있는 광범위한 함수 라이브러리를 제공합니다.

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