Question

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.

Answer 1

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.