拖动SVG元素时d3.js占位符图形

Question

I am creating a visual composer for a query language. 我正在为查询语言创建可视化作曲家。 I have 3 different SVG rect elements (say A->Operators, B->Some_Objects, C->Drawing Canvas). 我有3个不同的SVG矩形元素（例如A->运算符，B-> Some_Objects，C->绘图画布）。 I want to drag elements from A, B to C. If the user drag the element from A/B to C, the same element should be drawn in C and it has to be present in A/B as well. 我想将元素从A，B拖到C。如果用户将元素从A / B拖到C，则应该在C中绘制相同的元素，并且它也必须存在于A / B中。 Meanwhile if the user did not drop the element in C. it should not do anything. 同时，如果用户未将元素拖放到C中，则不应执行任何操作。

To achieve this, I tried to use a placeholder technique (like in jQuery UI). 为此，我尝试使用占位符技术（例如jQuery UI）。 But i couldn't find how to do it. 但是我找不到怎么做。 Can anyone help me with this? 谁能帮我这个？

Here is the UI I have created so far. 这是我到目前为止创建的UI。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/live.js"></script>
    <script src="js/d3.v3.min.js"></script>

</head>
<body>

<svg width="1024" height="768" style="background-color: #204d74">
    <!--<g>-->
        <rect x="10" y="20" height="250" width="300" style="fill: #080808"></rect>
        <rect class="drg" x="12" y="22" height="50" width="50" style="fill: #f0ad4e"></rect>
    <!--</g>-->
        <rect x="10" y="280" height="250" width="300" style="fill: #080808"></rect>
        <rect class="drg" x="12" y="282" height="50" width="50" style="fill: #f0ad4e"></rect>


        <rect x="320" y="20" height="510" width="690" style="fill: #080808"></rect>
</svg>

<script>
    function move() {
        d3.select(this)
//                                            .attr("transform", "translate(" + d3.event.x + "," + d3.event.y + ")");
                .attr('x', d3.event.x - parseInt(d3.select(this).attr("width")) / 2)
                .attr('y', d3.event.y - parseInt(d3.select(this).attr("height")) / 2)
        ;
        this.parentNode.appendChild(this);
    }
    d3.selectAll(".drg").style("fill","red").call(d3.behavior.drag().on('drag', move).origin(function() {
        var t = d3.select(this);
        return {x: t.attr("x"), y: t.attr("y")};
    }).on('dragend', function(d){
                console.log('end')


            })

    )


</script>

</body>
</html>

Answer 1

On dragEnd, you have to find the current mouse co-ordinates and based on it, clone the current element that is dragged & reset the original element x & y position. 在dragEnd上，您必须找到当前的鼠标坐标，并基于此坐标，克隆被拖动的当前元素并重置原始元素的x和y位置。

Have created a jsFiddle to show it. 已经创建了一个jsFiddle来显示它。 Check it out 看看这个

    .on('dragend', function(d){
            var elem = d3.select(this);
            elem.attr("x",elem.attr("initial-x"));
            elem.attr("y",elem.attr("initial-y"));
            console.log(elem.attr("x"));
            var mouseCoordinates = d3.mouse(this);
            if(mouseCoordinates[0] > 320) {
                //Append new element
                d3.select("svg").append("rect")
                .classed("drg", true)
                .attr("width", 50)
                .attr("height", 50)
                .attr("x", mouseCoordinates[0])
                .attr("y", mouseCoordinates[1])
                .style("fill", "green");
            }
    })

拖动SVG元素时d3.js占位符图形

问题描述

1 个解决方案

解决方案1
3 已采纳 2015-06-07 05:07:29

拖动SVG元素时d3.js占位符图形

问题描述

1 个解决方案

解决方案1 3 已采纳 2015-06-07 05:07:29

解决方案1
3 已采纳 2015-06-07 05:07:29