Изменение размера и перетаскивание элемента с помощью 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

Для этого вы можете использовать библиотеку Javascript 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); 
});