Menu
I have an SVG file within an object tag displaying in a table cell,and I want to make the SVG draggable within the table cell using JQuery's Draggable. The code--minus the confusing bits in the tag, looks like this:
<div id="container">
<div id="box">
<table align="center" border="1">
<tr>
<td valign="middle">button</td>
<td valign="top" id="objtd">
<div id="objdiv1">
<object id="svgobject1">blah, blah</object>
</div>
</td>
<td valign="middle">button</td>
</tr>
If I set the tag itself as draggable, draggable doesn't work. If I wrap the tag in a , and make the draggable, I can drag using the margin of the div, not the SVG itself. I tried setting the handle of the to the SVG object like this:
$('#objdiv1').draggable({ handle: '#svgobject1' });
but that failed as well.
Is there any way to make the SVG object draggable by clicking and dragging the SVG itself?
I set up an example here in case that helps see what I'm talking about.
237
One of the most common forms of interaction on a computer is clicking and dragging. I use it a lot for interactive demos, such as those in my SVG tutorial, and have a built a library for making simple draggable SVG diagrams.
Using jQuery UI, we can make the DOM(Document Object Model) elements to drag anywhere within the view port. This can be done by clicking on the draggable object by mouse and dragging it anywhere within the view port. If the value of this option is set to false, it will prevent the DOM elements to be dragged .
Using the mouse to drag an SVG element (or group of elements) can be accomplished by: Adding mousedown handler to starts the drag: adding a translation on the element to use during dragging (if needed), tracking mousemove events, and adding a mouseup handler to end the drag.
jQueryUI provides draggable() method to make any DOM element draggable. Once the element is draggable, you can move that element by clicking on it with the mouse and dragging it anywhere within the viewport.
HTML content doesn't get to see mouse events on the contents of <object>. Scripts in the page can only access mouse interaction data if the plug-in responsible deliberately makes it available through a custom interface.
I suggest including the SVG content as part of the page itself, rather than using <object>. This means you'll have to serve the page as application/xhtml+xml, and add a namespace for the SVG elements. Example. With inline SVG, the SVG elements themselves respond to mouse events and can be scripted just like the HTML elements.
The drawback of inline SVG is that it won't work on IE with the SVG plug-in. But then no-one has used the plug-in for years anyway, and IE9 will support inline SVG too.
128
In my case ( I'm writing a chrome only app and my SVGs are in a separate file ) I was able to change the object tag to an img tag with the type attribute set to "image/svg+xml," and the src attribute set to the path to my svg file, and that solved the problem for me.
Your mileage may vary in other browsers, but if you are writing for webkit, this approach seems to work.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
