Home/ Questions/Q 8678511
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T20:44:24+00:00

I have the following code ( jsfiddled ). I want to use red SVG

  • 0

I have the following code (jsfiddled). I want to use red SVG rectangle as a handle for draggable div element, but because the SVG element is not a child of div, it is not possible. The idea is to let the handle (red rect) fire drag event of div and when div is being dragged, the code updates position of red SVG rectangle. How can I get SVG rectangle to act as drag handle for the div (so that SVG element is not a child of div element)?

I have tested to make SVG a child of div and used SVG rect as handle, and this worked normally. When I dragged SVG rect, the div and SVG rect were moved while dragging. But the problem is that also SVG element itself is dragged. But I don’t want that SVG element itself is moved while dragging, only rect and div.

EDIT: Some sort of triggering drag event of div when pressing mouse on svg rect comes to my mind as a possible solution, but not tested yet.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Draggable - Handles</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
        <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
        <style>
            #draggable { position:absolute; opacity:0.5;
    width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
           #draggable p { cursor: move; }
           #draggable {left:30px;top:0px;z-index:1}
        </style>
        <script>
            $(function() {
                $( "#draggable" ).draggable({ handle: "p" });
                $( "div, p" ).disableSelection();
            });
        </script>
    </head>
    <body>
        <div id="draggable" class="ui-widget-content">
            <p class="ui-widget-header">I can be dragged only by this handle</p>
        </div>
        <svg width="500" height="500" style="position:absolute;z-index:-1">
            <rect x="0" y="0" width="100" height="100" fill="#FF8888"/>
        </svg>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    After some testing I ended up to use combination of div.trigger(e) and updating SVG rect’s transform attribute in draggable div’s drag-function this jsfiddled way.

    The key point is the following code, which triggers div’s drag event when pressing mouse on SVG path element:

    $("#path_1").mousedown(function(e) {
    $( "#div_1" ).trigger(e);
});

    And the other key point is the following, which updates SVG path element’s transform attribute to achieve movement:

    drag: function(e, ui)
{
    var x=$( "#div_1" )[0].style.left;
    var y=$( "#div_1" )[0].style.top;
    x = parseInt(x);
    y = parseInt(y);
    $( "#path_1" ).attr("transform", "translate("+x+","+y+")");
}

    It relies on pointer-events:none in div, so not works in Opera, but in other new browsers yes. There is a hack to allow pointer-events:none, but better to wait that all newest browsers allow it natively. And pointer-events is not problem in the question’s example because red rectangle is not fully below div.

    Jsfiddle example can be extended to eg. make a selection rectangle functionality for SVG elements, if you want to use jQuery Draggable plugin for dragging SVG’s graphical objects and want to use divs as selection rectangles. (Other possible solution to selection rectangles is to use two SVG root elements, one for selection rectangles and one for actual shapes.)

    And using setTimeout() we can force that always when div is moved, also SVG path is moved.

    • 0