Question

我有一个jsPlumb元素被放到画布上，一旦它被删除，用户应该能够调整它的大小。我已经尝试在被删除的元素上放置一个css resize属性，但它没有被应用。

CSS

.partitiondrop {
    border: 1px solid #346789;

   resize: both;

    box-shadow: 2px 2px 19px #aaa;
    ...
    opacity: 0.8;
    ...
    z-index: 20;
    position: absolute;
    ...

投放功能

 var newAgent = $('<div>').attr('id', i).addClass('partitiondrop');
 dropPartition(newAgent, i, e);

dropPartition功能

function dropPartition(newAgent,i,e)
{
     $(droppedElement).draggable({containment: "container"});
     var finalElement =  newAgent;
     $(finalElement).resizable({
            resize : function(event, ui) {
            jsPlumb.repaint(ui.helper);
        },
        handles: "all"
    });


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

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

     $('#container').append(finalElement);
}

即使JS函数中的Resizable代码也没有任何效果

当前元素

我想要一个调整大小的选项，如下所示（没有滚动 - 即不需要溢出控制）出现在元素的右下角

Answer 1

您正在寻找CSS3属性：resize: both;。

目前在Internet Explorer中不支持它，如here所示。

Answer 2

这可以使用interact.js库作为替代方案来完成。在需要调整大小的被删除元素上使用以下方法，可以通过interact.js启用调整大小功能，并且可以通过jsPlumb本身允许可拖动函数。

交互调整大小功能

interact('.partitiondrop')
    .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);
    });

还需要包含interact.js文件。有关interact.js library的更多信息，请点击此处。

启用已删除元素-Javascript中的调整大小

2 个答案: