使用 jsPlumb 调整和拖动元素的大小答案

【问题标题】：Resize and Drag an Element using jsPlumb使用 jsPlumb 调整和拖动元素的大小
【发布时间】：2016-08-09 06:12:51
【问题描述】：

我正在使用 jsPlumb 库来实现一个简单的界面，其中可以将元素从工具箱中拖放到容器中。在这里，我有一个元素（'partitiondrop'），它需要同时调整大小和可拖动。但是，以下代码不允许调整分区大小。如果没有jsPlumb.draggable，resize 函数可以工作，但是一旦元素被放下，它就不能被拖动。

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

partitiondrop 的 CSS

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

我们将非常感谢您提出这方面的建议。

【问题讨论】：

标签： javascript jquery resize draggable jsplumb

【解决方案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);
});

【讨论】：