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

如果你想使用jQuery样式的appedning 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可以玩：

JSFIDDLE EXAMPLE HERE

双击附加输入框

1 个答案: