Question

我试图将一个分区（类似于锚点）附加到双击时从工具箱中删除的元素。我一直在使用jsPlumb来实现除了上下文中的这个特定元素之外的所有元素的拖放功能，因为我还需要调整它的大小。我可以使用jsPlumb的resize，但由于其他原因它没有用，我决定使用interact.js和interact.js的resize和draggable函数完美地工作。但是，我的问题是我需要在删除元素后立即将anchors / tiny div附加到此元素。我已经尝试过以下方法，使双方点击显示小方块，但它会继续影响容器中的所有分区元素，而不仅仅是单击的元素，当元素调整大小时，此除法也会消失。但是我需要将它永久地附加到点击的元素上。

interact.js

interact('.partitiondrop').on('dblclick',function () {
    alert(" double clicked");
    var element =  event.target.id;
    var prop = $('<div class="connection" style="background-color: #00AA00 ; width: 30px; height: 30px;">').attr('id', (i+('-prop')));
    $('.partitiondrop').append(prop);
});

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

我尝试将分区附加到所选（双击）分区，只是尝试获取所单击元素的ID-＆gt;可变元素。但这没有按预期工作

在以下

的背景下

var prop = $('<div class="connection" style="background-color: #00AA00 ; width: 30px; height: 30px;">').attr('id', (i+('-prop')));

i 是一个不断递增的全局变量，用于为被删除的元素分配唯一的ID。

Answer 1

不确定是否对其他元素使用类“.partitiondrop”，如果你想附加此特定元素，也许你可以尝试 $（这个）而不是可能与其他元素一起使用的类 .partitiondrop ，顺便提一下在这个问题上提供codepen或jsfiddle

interact('.partitiondrop').on('dblclick',function () {
    alert(" double clicked");
    var element =  event.target.id;
    var prop = $('<div class="connection" style="background-color: #00AA00 ;width: 30px; height: 30px;">').attr('id', (i+('-prop')));
    $(this).append(prop);
});

在点击时永久性地将分部附加到元素

1 个答案: