javascript - append input box on double click -
append text box shape on double click. right now, appending textbox appending @ 0,0 coordinates of window after using inline styles
function dragend(d) { var self = d3.select(this); // first time i'm dragged? // replace me new 1 if (self.classed('initialdragcircle')) { // append new inital draggable createinitialdrag(); self.attr('class', 'dragcircle'); } else if (self.classed('initialdragrect')) { // append 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 +" , left is: "+ left); $('#container').append('<input type=text class"bpmnlabel" value="hi" autofocus style="position:absolute top:'+(top)+ " left:"+left+'"/>'); }); }
how fix this?
if want use jquery style of appedning css
rather d3.js
cold do:
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>
and here's jsfiddle play with:
Comments
Post a Comment