Question

我正在为查询语言创建一个可视化作曲家。我有3个不同的SVG rect元素（比如A-＆gt; Operators，B-> Some_Objects，C-＆gt; Drawing Canvas）。我想将元素从A，B拖到C.如果用户将元素从A / B拖到C，则应该在C中绘制相同的元素，并且它也必须存在于A / B中。同时，如果用户没有将元素放入C.它不应该做任何事情。

为实现这一目标，我尝试使用占位符技术（如jQuery UI）。但我找不到怎么做。谁能帮我这个？

这是我到目前为止创建的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

在dragEnd上，你必须找到当前的鼠标坐标，并根据它，克隆被拖动的当前元素。重置原始元素x＆amp;你的位置。

已创建jsFiddle来展示它。看看

    .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");
            }
    })

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

1 个答案: