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

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

interact（'.partitiondrop'）.on（'dblclick'，function（）{
警报（“双击”）；
var元素=event.target.id；
var prop=$（''）.attr（'id'，（i+（'-prop'））；
$（'.partitiondrop'）.append（prop）；
});
交互（“.partitiondrop”）
.可调整大小({
是的，
边：{left:true，right:true，bottom:true，top:true}
})
.on（'resizemove'，函数（事件）{
var target=event.target，
x=（parseFloat（target.getAttribute（'data-x'））| | 0），
y=（parseFloat（target.getAttribute（'data-y'））| | 0）；
//更新元素的样式
target.style.width=event.rect.width+'px'；
target.style.height=event.rect.height+'px'；
//从上边缘或左边缘调整大小时平移
x+=event.deltaRect.left；
y+=event.deltaRect.top；
target.style.webkitttransform=target.style.transform=
'翻译（'+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->variable元素，仅将分割添加到所选（双击）的partitiondrop。但这并没有达到预期效果

在下列情况下

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

var prop=$（''）.attr（'id'，（i+（'-prop'））；

---

i

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

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

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

interact（'.partitiondrop'）.on（'dblclick'，function（）{
警报（“双击”）；
var元素=event.target.id；
var prop=$（''）.attr（'id'，（i+（'-prop'））；
$（本）。追加（道具）；
});

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

interact（'.partitiondrop'）.on（'dblclick'，function（）{
警报（“双击”）；
var元素=event.target.id；
var prop=$（''）.attr（'id'，（i+（'-prop'））；
$（本）。追加（道具）；
});

这段代码中有一些奇怪的地方。i变量来自何处？在侦听dbclick事件的第一个“on”方法中，variable元素的用途是什么？我试图通过尝试获取单击的元素的ID->variable元素，将除法仅附加到所选（双击）partitiondrop。但这不起作用，因为InternetDedI变量只是作为分配唯一ID的计数。这会随着每个元素的删除而不断增加。因此，为了跟踪某个div附加到的元素，我为该div分配了与单击的元素相同的id（vari）和一个额外的“-prop”关键字。这段代码中有一些奇怪的地方。i变量来自何处？在侦听dbclick事件的第一个“on”方法中，variable元素的用途是什么？我试图通过尝试获取单击的元素的ID->variable元素，将除法仅附加到所选（双击）partitiondrop。但这不起作用，因为InternetDedI变量只是作为分配唯一ID的计数。这会随着每个元素的删除而不断增加。因此，为了跟踪某个div附加到的元素，我为该div分配了与单击的元素相同的id（var I）和一个额外的“-prop”关键字。我已经尝试使用

this

关键字，但出现了这个错误。很抱歉，我的问题很无聊，但是这些“开”方法肯定是在dom完全呈现后添加的，我的意思是在$（document）.ready（）中？是的，它们是

var newAgent=$（''）.attr（'id'，I）.addClass（'partitiondrop'）；css（{'top'：e.pageY，'left'：e.pageX}）$（“#container”）.append（newAgent）；i++；finalElementCount=i这是我在开始时在jsPlumb ready函数中丢弃元素的方式，如果它影响了代码的话。好吧，很抱歉我的无助回答，我看了一下这个插件的文档，它似乎不在“on”范围内使用jquery方法，最后一个建议是，将代码修改为var element=event.target；元素[0]。innerHTML+=''；element.setAttr