javascript - 根据鼠标坐标拖放线-6ren

javascript - 根据鼠标坐标拖放线

转载作者：行者123 更新时间：2023-12-01 04:44:23

25

4

拖放形状被放置在错误的坐标上。我非常接近使用翻译变换来实现它，但还缺少一些东西。我该如何解决这个问题？

检查 fiddle :http://plnkr.co/edit/FmWL4pACdw1haCLXsCZt?p=preview

代码:

<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>

最佳答案

当您附加路径时，您正在执行 M 100 100 - 这会将线相对于原点移动 100 x 单位和 100 y 单位。只需将其设置为 0

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

<小时/>

更新了 Plunker - http://plnkr.co/edit/ba5olqX88izPK1G66DrK?p=preview

关于javascript - 根据鼠标坐标拖放线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32224027/

25

4

0

文章推荐： python - 将 pdb 与替代 Python 安装一起使用

文章推荐： php - 具有不同 ID 的多个按钮事件的 JQuery 函数

文章推荐： python - Django 1.8 中的模板 ("..").render() 不允许数值

文章推荐： javascript - 滚动到隐藏的输入

c# - 属性与 get 之间的区别；放;没有得到；放;
这个问题在这里已经有了答案: Difference between Property and Field in C# 3.0+ (10 个答案) 关闭 10 年前。我不明白静态属性之间的区别: p
jquery拖/放-获取被拖放的元素的id
当元素被拖放时，有没有办法从被拖动的元素中获取 id(或其他属性值)？例如，在左侧，我有一堆 div，我可以将图像放入其中。右边有一个 div 用来保存图像。当我将图像从右侧拖动到左侧的 div 时
c# - 获取问题；放;
每当我更改其中一个类属性时，我想设置一个修改标志，如下所示 public bool Modified { get; set; } public bool Enabled { get; set { Mo
C# HttpClient 放
由于某种原因，我下面的代码曾经可以正常工作，但现在却引发了一个异常: public static async Task HttpPut(string inUrl, string inFilePath)
javascript - 放；在函数定义的末尾
为什么将 ; 放在最佳实践中？在函数定义的末尾。例如 var tony = function () { console.log("hello there"); }; 优于: var tony
bitmap - EaselJS:有问题的拖/放
我在容器内有一个位图。当我拖动容器时，光标变为编辑文本形状，图像也跳到光标的右下角(好像我从左上角拿着图像并拖动它)。这是我的代码，所以你可以看到我有 RTFM: function createIc
c# - 表达式主体属性与 {get;放;}
这个问题已经有答案了: C# 3.0 auto-properties — useful or not? [closed] (17 个回答) 已关闭 6 年前。当我让 Visual Studio 20
c# - 多么简单的得到；放;在一个类意味着？
以类中的以下代码为例: public class Employee : IEntity { public string FirstName { get; set; } public s
javascript - 放(存)json数据
我有 json 数据: { "products": [ { "productId" : 0, "productImg" : "../img/product-ph
c# - { 得到;放; } 在变量声明中
这个问题在这里已经有了答案: What is the difference between a field and a property? (33 个答案) 关闭 9 年前。我在一本书上找到这样声
c# - 得到;放;变量
我正在设置多个方法，想知道如何继续将一个变量(“顶部”变量)传递给不同的方法。主要方法: public static void Main(string[] args) { i
bash - Hadoop Crontab 放
我正在尝试使用 crontab 编写一个简单的任务，将一些文件从本地复制到 HDFS。我的代码是这样的: #!/bing/ksh ANIO=$(date +"%Y") MES=$(date +"%m"
javascript - 限制 jQuery 中节点的拖/放？
有人可以告诉我如何使用这个解决方案来解决我的问题吗？我也想限制 id 中包含文本“not”的节点的拖/放。 jsTree drag and drop restrict folders by class
javascript - jquery sortable 禁用特定项目之间的拖/放
我的情况如下 - 我正在对可能包含链接行的表进行排序: row 1 row 2 row 3 row 4 row 5 我需要的是禁止在.linked-to-p
ASP.net AJAX 拖/放？
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表，我希望用户能够通过拖放对列表进行重新排序。此外，我希望有第二个列表，用户可以将第一个列表中的项目拖到其中。到
scheme - 放!并在 Scheme 中别名
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
ASP.net AJAX 拖/放？
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表，我希望用户能够通过拖放对列表进行重新排序。此外，我希望有第二个列表，用户可以将第一个列表中的项目拖到其中。到
scheme - 放!并在 Scheme 中别名
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
c# - 如何使 ModalPopup 拖/放
我在我的 Web 应用程序中使用 Ajax ControlToolkit 中的 ModalPopupExtender。我将其 Drag 属性设置为 true，但是当我拖动弹出面板并将其放到新位置时，它
jQuery UI 拖/放，捕捉到底部
所以，基于this answer ，我有一组可以拖放并卡入到位的 div。唯一的问题是，可拖动的 div 具有不同的高度，我需要它们始终捕捉到目标的底部，而不是顶部。您可以在this JsFiddl

首页

博学

6Ren·AI

商城

javascript - 根据鼠标坐标拖放线