jquery - Html5 drag and drop on svg element

Question

Welcome To Ask or Share your Answers For Others

jquery - Html5 drag and drop on svg element

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

jquery - Html5 drag and drop on svg element

I am trying to follow the html5 drag and drop tutorial here. I could not get the dragstart event to be registered on rect element. If I change the event from draggable to mousedown it calls the handleDragStart handler. Please ignore the additional blank registration in the code.

JSFiddle here

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

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();
});

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T01:06:54+0000

I know this is an old question, I arrived here from this other question that was marked as a duplicate of this one, and wanted to add a possible solution that doesn't require jQuery or any libraries, and that works in all major browsers. It is based on this tutorial recommended by @AmirHossein Mehrvarzi.

This small solution doesn't use the drag events, just the mousedown, mouseup and mousemove. This is how it works:

When the mouse is down on the rectangle, it saves the mouse position and the active element.
When the mouse moves, the rectangle coordinates are updated with the new mouse position.
When the mouse is up, it resets the active element.

From the code in the question above:

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();
});

rect { cursor: move; }

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

Categories

jquery - Html5 drag and drop on svg element

jquery - Html5 drag and drop on svg element

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags