在双击时附加输入框

append input box on double click

本文关键字：输入双击更新时间：2023-09-26

在双击时将文本框附加到形状上。现在，它在添加一个文本框但是它只在窗口的0,0坐标处添加即使在使用内联样式

之后

 function dragend(d) {
                    var self = d3.select(this);
                    // is this the first time I'm dragged?
                    // replace me with a new one
                    if (self.classed('initialDragCircle')) {
                        // append a new inital draggable
                        createInitialDrag();
                        self.attr('class', 'dragCircle');
                    }
                    else if (self.classed('initialDragRect'))
                    {
                        // append a new inital draggable
                        createInitialDrag();
                        self.attr('class', 'dragRect').transition().attr("width", 111).attr("height", 71)
                        self.on('dblclick', function ()
                        {      
                            var coords = d3.mouse(targG.node());
                            var left = coords[0]
                            var top = coords[1];
                            console.log("top is: "+ top +" and left is: "+ left);
                            $('#container').append('<input type=text class"bpmnLabel" value="hi" autofocus style="position:absolute top:'+(top)+ " left:"+left+'"/>');
                        });
                    }

如何解决这个问题?

如果你想用jQuery样式来显示css而不是d3.js，你可以这样做:

var top = 100;
var left = 100;
$('#container').append('<input type="text" class="bpmnLabel" value="hi" autofocus/>')
$(".bpmnLabel").css({"position": "absolute", "top": top, "left": left});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

这里有一个jsFiddle可以使用: