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

I have a jsPlumb element that is being dropped onto the canvas and once it's dropped, the user should be able to resize it. I've tried having a css resize property placed on the dropped element but it is not being applied.

我有一个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;
    ...

Drop Function

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

dropPartition Function

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

Even the Resizable code within the JS function has no effect whatsoever

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

Current Element

I would like for a resize option as shown below(without the scrolling- i.e. no overflow control needed) to appear on the right-bottom corner of the element

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

2 个解决方案

#1

You're looking for the CSS3 property: resize: both;.

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

It's currently not supported in Internet Explorer, as seen here.

目前在Internet Explorer中不支持它,如此处所示。

#2

This can be done using the interact.js library as an alternative. Having the following method on the dropped element that needs to be resized the resizing function can be enabled through interact.js and the draggable function can be allowed via jsPlumb itself.

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

Interact Resize Function

Interact Resize功能

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

The interact.js file needs to be included as well. Further info on the interact.js library can be found here.

还需要包含interact.js文件。有关interact.js库的更多信息,请访问此处。

#1