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

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->变量元素，将除法附加到所选（双击）分区。 但这并没有按预期发挥作用

在以下的背景下

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

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

Answer 1

不确定你是否使用类 “.partitiondrop”用于其他元素，如果你想附加在这个特定的元素上 ，也许你可以尝试$（this）而不是类.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);
});