javascript - 双击添加输入框

Question

双击时将文本框附加到形状。现在，它附加了一个文本框，但即使在使用内联样式后，它也仅附加在窗口的 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+'"/>');
                        });
                    }

如何解决这个问题？

Answer 1

如果您想使用附加的 css 的 jQuery 样式，而不是您冷淡的 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:

JSFIDDLE EXAMPLE HERE