Html5拖放svg元素

Question

Html5拖放svg元素

bsr*_*bsr 14 jquery html5 svg drag-and-drop

我想跟随HTML5拖放教程这里.我无法dragstart在rect元素上注册该事件.如果我将事件更改为draggable,mousedown则调用handleDragStart处理程序.请忽略代码中的其他空白注册.

<!DOCTYPE html>
<html><head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <style type="text/css" media="screen">
    svg rect { cursor: move; }
  </style>
</head><body>
  <h1>SVG/HTML 5 Example</h1>
  <svg id="cvs">
    <rect draggable="true" x="0" y="10" width="100" height="80" fill="#69c" />
    <rect x="50" y="50" width="90" height="50" fill="#c66" />        
  </svg>
  <script type="text/javascript" src="loc.js"></script>
</body></html>

Run Code Online (Sandbox Code Playgroud)

loc.js

$(document).ready(function() {    
    function handleDragStart(e) {
        log("handleDragStart");                
          this.style.opacity = '0.4';  // this ==> e.target is the source node.
    };

    var registercb = function () {
            $("#cvs > rect").each(function() {
                  $(this).attr('draggable', 'true');
              });
            $("#cvs > rect").bind('dragstart', handleDragStart);    
            $(window).mousedown(function (e) {        

            });    
            $(window).mousemove(function (e) {                
            });
            $(window).mouseup(function (e) {
                log("mouseup");                
            });
        };

    function log() {
      if (window.console && window.console.log)
        window.console.log('[XXX] ' + Array.prototype.join.call(arguments, ' '));
    };

    registercb();
});

Run Code Online (Sandbox Code Playgroud)

Answer 1

Alv*_*oro 11

我知道这是一个老问题,我从这个被标记为这个问题的副本的问题到达这里,并希望添加一个不需要jQuery或任何库的可能解决方案,并且适用于所有主流浏览器.它基于@AmirHossein Mehrvarzi推荐的本教程.

这个小解决方案不使用拖动事件,只是mousedown,mouseup和mousemove.这是它的工作原理:

当鼠标在矩形上向下时,它会保存鼠标位置和活动元素.
当鼠标移动时,使用新的鼠标位置更新矩形坐标.
当鼠标向上时,它会重置活动元素.

从上面问题中的代码:

var selectedElement = null;
var currentX = 0;
var currentY = 0;

$(document).ready(function() {
    
    function handleDragStart(e) {
        log("handleDragStart");                
        this.style.opacity = '0.4';  // this ==> e.target is the source node.
    };
    
    var registercb = function () {
       
        $("#cvs > rect").mousedown(function (e) {
            // save the original values when the user clicks on the element
            currentX = e.clientX;
            currentY = e.clientY;
            selectedElement = e.target;
        }).mousemove(function (e) {    
            // if there is an active element, move it around by updating its coordinates           
            if (selectedElement) {
                var dx = parseInt(selectedElement.getAttribute("x")) + e.clientX - currentX;
                var dy = parseInt(selectedElement.getAttribute("y")) + e.clientY - currentY;
                currentX = e.clientX;
                currentY = e.clientY;
                selectedElement.setAttribute("x", dx);
                selectedElement.setAttribute("y", dy);
            }
        }).mouseup(function (e) {
            // deactivate element when the mouse is up
            selectedElement = null;  
        });
    };
    
    function log() {
        if (window.console && window.console.log)
            window.console.log('[XXX] ' + Array.prototype.join.call(arguments, ' '));
    };
    
    registercb();
});

Run Code Online (Sandbox Code Playgroud)

rect { cursor: move; }

Run Code Online (Sandbox Code Playgroud)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>SVG/HTML 5 Example</h1>
<svg id="cvs">
    <rect x="0" y="10" width="100" height="80" fill="#69c" />
    <rect x="50" y="50" width="90" height="50" fill="#c66" />        
</svg>

Run Code Online (Sandbox Code Playgroud)

你也可以在这个JSFiddle上看到它:http://jsfiddle.net/YNReB/61/

如果要添加删除功能,可以修改mouseup函数以读取光标位置上的元素(with document.elementFromPoint(e.clientX, e.clientY)),然后可以对原始元素和删除它的元素执行操作.

Answer 2

Man*_*ger 8

此行为可能由以下几个原因引起:

根据这篇文章,HTML 5拖放是一团糟.我知道它有点老了,但问题似乎还没有解决
jQuery不支持SVG DOM模型.因此,它的某些部分可能有效,有些部分则无效(喜欢offset()或width()).

我现在绝对不依赖于HTML5拖放支持,而是使用库来处理这个问题.如果你想使用SVG,你可以试试Raphaël.如果你也需要jQuery,也许SVG插件是可行的方法.请注意,目前这两个项目都没有积极开发.我知道这不是一个令人满意的答案,但我也必须学习,jQuery和SVG并没有很好地结合在一起.希望有人证明我错了;).

归档时间：	14 年，4 月前
查看次数：	20696 次
最近记录：	10 年，3 月前