在删除的元素中启用调整大小 -Javascript答案

【问题标题】：Enable resizing in dropped element -Javascript在删除的元素中启用调整大小 -Javascript
【发布时间】：2016-07-29 07:24:47
【问题描述】：

我有一个 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 代码也没有任何作用

当前元素

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

【问题讨论】：

标签： javascript html css resize jsplumb

【解决方案1】：

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

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

【讨论】：

我使用的是 Chrome 和 Firefox 而不是 IE，并且我还在我的 css 部分中包含了 resize:both，如上所示，但它不起作用
为了工作，您缺少overflow: auto。看到这个小提琴：jsfiddle.net/yqdzp7dk
感谢演示。我添加了溢出属性，现在调整大小的图标出现在元素上。但是当我尝试单击并调整元素大小时，它只是整体拖动而不调整大小。这可能是可拖动元素的问题吗？
由于演示中显示的元素是停滞的，它完美地工作。但是这个问题上下文中的元素是可拖动的
我无法预见使用的两个库会出现任何问题。可能在 div 上完全捕获了点击事件 - 包括浏览器事件。例如，如果您想将插件与可调整大小的 div 一起使用，那么一个合适的解决方案就是一个可拖动的顶栏，就像大多数桌面 UX 一样。 JSPlumb 中似乎也有一个内置版本，请参阅：stackoverflow.com/questions/27817367/…

【解决方案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 的更多信息，请点击此处。

【讨论】：