Question

我想在drop上添加一个圆圈。我尝试使用jquery ui draggable和droppable方法但是当我使用jquery函数时我无法拖动圆圈。对此还有其他选择吗？

<!doctype html>
<html>
    <head>
        <meta http-equiv="x-ua-compatible" content="ie=9"/>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="<%=request.getContextPath()%>/style.css" />
        <script type="text/javascript">
            window.onload = function ()
            {
                var svgContainer = d3.select("body").append("svg")
                        .attr("width", 800)
                        .attr("height", 803);

                var circle3 = svgContainer.append("circle")
                        .attr("id", "tobeDrooped").attr("cx", 35).attr("cy", 310).attr("r", 25)
                        .style("fill", "white").style('cursor', 'move').style("stroke", "black");

                var dragGroup = d3.behavior.drag()
                        .origin(function () {
                            var g = this;
                            return {x: d3.transform(g.getAttribute("transform")).translate[0],
                                y: d3.transform(g.getAttribute("transform")).translate[1]};
                        })
                        .on("drag", function (d, i) {
                            g = this;
                            translate = d3.transform(g.getAttribute("transform")).translate;
                            x = d3.event.dx + translate[0],
                                    y = d3.event.dy + translate[1];
                            d3.select(g).attr("transform", "translate(" + x + "," + y + ")");
                            d3.event.sourceEvent.stopPropagation();
                        });

                var group = svgContainer.append("g")
                        .attr("id", "mygroup")
                        .call(dragGroup)
                        .style('cursor', 'move')
                        .attr("transform", "translate(20, 20)");
                group.append("rect")
                        .attr("x", 250).attr("y", 250)
                        .attr("width", 151).attr("height", 141)
                        .attr("stroke", "#7E7E7E")
                        .style("fill", "white");

                var drag = d3.behavior.drag()
                        .origin(function ()
                        {
                            var t = d3.select(this);
                            return {x: t.attr("cx"), y: t.attr("cy")};
                        })

                        .on('dragend', function (d) {
                            var mouseCoordinates = d3.mouse(this);
                            if (mouseCoordinates[0] > 170) {
                                //Append new element
                                var circle2 = d3.select("svg").append("circle")
                                        .classed("drg", true)
                                        .attr("cx", 100)
                                        .attr("cy", 100)
                                        .attr("r", 20)
                                        .attr("cx", mouseCoordinates[0])
                                        .attr("cy", mouseCoordinates[1])
                                        .style("fill", "white")
                                        .style("stroke", "black");
                            }
                        });
                circle3.call(drag);


        // JQUERY FUNCTION
                $(function () {
                    $("#tobeDrooped").draggable();
                    $("#mygroup").droppable({
                        drop: function (event, ui) {
                            group.append("circle")
                                    .style("stroke", "green")
                                    .style("fill", "grey")
                                    .attr("r", 40)
                                    .attr("cx", 100)
                                    .attr("cy", 100);
                        }
                    });
                });
            };
        </script>
    </head>
    <body>
        <div id="container">
        </div>
    </body>
</html>

来自其他网站的jquery droppable函数示例：http://jsfiddle.net/sb6ja2ru/

Answer 1

这会将矩形更改为红色（您可以执行任何其他操作，例如将圆圈移动到矩形的中心，禁用拖动行为等）一旦将圆圈拖入其中（它会检查圆心是否正确）越过边界）。

window.onload = function () {
    var svgContainer = d3.select("body").append("svg")
            .attr("width", 800)
            .attr("height", 803);

    var rectg = svgContainer.append("g")
    var rect = rectg
        .append("rect")
        .attr("x", 250).attr("y", 250)
        .attr("width", 151).attr("height", 141)
        .attr("stroke", "#7E7E7E")
        .style("fill", "white");

    var circle3 = svgContainer.append("circle")
            .attr("id", "tobeDrooped").attr("cx", 35).attr("cy", 310).attr("r", 25)
            .style("fill", "white").style('cursor', 'move').style("stroke", "black");

    var drag =
        d3.behavior.drag()
            .on("dragstart", function (d, i) {
                this.setAttribute("dx", event.x)
                this.setAttribute("dy", event.y)
            })
            .on("drag", function (d, i) {
                var cx = Number(this.getAttribute("cx")) + event.x - Number(this.getAttribute("dx"));
                var cy = Number(this.getAttribute("cy")) + event.y - Number(this.getAttribute("dy"));
                this.setAttribute("dx", event.x)
                this.setAttribute("dy", event.y)
                this.setAttribute("cx", cx)
                this.setAttribute("cy", cy)

                if (cx > Number(rect.attr("x")) && cx < (Number(rect.attr("x")) + Number(rect.attr("width"))) &&
                    cy > Number(rect.attr("y")) && cy < (Number(rect.attr("y")) + Number(rect.attr("height")))) {
                    rectg.node().appendChild(this);
                    rect.style("fill", "red");
                }
            })
            .on("dragend", function (d, i) {
                this.removeAttribute("dx")
                this.removeAttribute("dy")
            })

    circle3.call(drag);
};

http://jsfiddle.net/6vojozy1/

拖放时附加到svg组

1 个答案: