CODEWITHSUNDEEP
javascriptjqueryd3.jssvg
kittu
kittu

Reputation: 7008

Drag Drop line based on mouse coordinates

Drag dropping a shape is getting placed on wrong coordinates. I am pretty close to achieving it using translate transform but there's some thing missing. How do I fix this?

Check the fiddle: http://plnkr.co/edit/FmWL4pACdw1haCLXsCZt?p=preview

Code:

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <link type="text/css" rel="stylesheet" href="css/style.css">
        <link type="text/css" rel="stylesheet" href="css/standard.css">
        <script src="scripts/jquery.js"></script>
        <script src="scripts/d3.min.js"></script>
    </head>
    <body>
        <div id="content">
            <div style="position: relative; height: 100%;">
                    <div><a id="newConnector" title="Add new sequence/data/message flow" draggable="true" ondragstart=getId(this.id) ondragend="createShape(event)"><img src="images/sequence.png"></a></div>
                </div>

                <div id="canvas" tabindex="0">
                    <script>
                        var svg = d3.select('#canvas')
                                .append("svg")
                                .attr("width", 800)
                                .attr("height", 803);

                        var clientX, clientY, offsetX, offsetY;
                        var x, y;
                        var shapeId = "";

                        function getId(id)
                        {
                            shapeId = id;
                            console.log(shapeId);
                        }
                        function createShape(event)
                        {
                            var $stageContainer = $("#canvas");
                            var stageOffset = $stageContainer.offset();
                            clientX = event.clientX;
                            clientY = event.clientY;
                            offsetX = stageOffset.left;
                            offsetY = stageOffset.top;
                            x = clientX - offsetX;
                            y = clientY - offsetY;
                            console.log("x is: " + x + " " + "y is: " + y);

                            switch (shapeId)
                            {
                                case('newConnector'):
                                    createLine(x, y);
                                    break;
                                default:
                                    console.log("Nothing to drag");
                            }
                        }
                        function createLine(x, y)
                        {
                            svg.append("path")
                                    .attr("d", 'M 100 100 L 400 100 z')
                                    .attr("transform", "translate(" + x + "," + y + ")")
                                    .attr("stroke", "blue")
                                    .attr("stroke-width", 2)
                                    .attr("fill", "none")
                                    .style('cursor', 'move')
                                    .call(drag);

                        }
                        function getTranslate(t) {
                            var translate = d3.transform(t.getAttribute("transform")).translate;
                            return {
                                x: Number(translate[0]),
                                y: Number(translate[1])
                            };
                        }
                        var drag = d3.behavior.drag()
                                .origin(function ()
                                {
                                    return getTranslate(this);
                                })
                                .on("drag", move);

                        function move(d) {
                            var x = d3.event.x;
                            var y = d3.event.y;
                            d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
                        }
                    </script>
                </div>
            </div>
        </div>
</body>
</html>

Upvotes: 2

Views: 744

Answers (1)

potatopeelings
potatopeelings

Reputation: 41065

When you were appending the path you were doing a M 100 100 - this moves the line 100 x units and 100 y units relative to the origin. Just set this to 0

...
svg.append("path")
   .attr("d", 'M 0 0 L 400 0 z')

Updated Plunker - http://plnkr.co/edit/ba5olqX88izPK1G66DrK?p=preview

Upvotes: 1

Related Questions