单击时将分区永久附加到元素

Question

我正在尝试将一个分区（类似于锚点）附加到我在双击时从工具箱中删除的元素。我一直在使用 jsPlumb 来实现所有元素的拖放功能，除了上下文中的这个特定元素，因为我还需要调整它的大小。我本可以使用 jsPlumb 的调整大小，但由于某些其他原因，它不起作用，我决定使用 interact.js，并且 interact.js 的调整大小和可拖动功能完美地工作。但是，我的 问题 是我需要在删除元素后立即将锚点/小 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);
    });

我尝试仅将除法附加到选定（双击）partitiondrop，方法是尝试获取被单击元素的 ID -> 变量元素。但这并没有按预期工作

在以下上下文中

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

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

Answer 1

不确定你是否对其他元素使用 class ".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);
});