JQuery Draggable和带有SVG的<object>？

Question

我在一个表格单元格中显示的对象标签中有一个SVG文件,我想使用JQuery的Draggable使SVG在表格单元格内可拖动.代码 - 减去标记中令人困惑的位,如下所示:

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

如果我将标记本身设置为可拖动,则可拖动不起作用.如果我将标签包装在a中并使其成为可拖动的,我可以使用div的边距而不是SVG本身进行拖动.我试着像这样设置SVG对象的句柄:

$('#objdiv1').draggable({ handle: '#svgobject1' });

但那也失败了.

有没有办法通过单击并拖动SVG本身来使SVG对象可拖动？

我在这里设置了一个示例,以防有助于了解我在说什么.

Answer 1

HTML内容无法在内容上看到鼠标事件<object>.如果负责的插件故意通过自定义界面提供,则页面中的脚本只能访问鼠标交互数据.

我建议将SVG内容作为页面本身的一部分,而不是使用<object>.这意味着您必须将页面作为服务页面application/xhtml+xml,并为SVG元素添加命名空间.例子.使用内联SVG,SVG元素本身可以响应鼠标事件,并且可以像HTML元素一样编写脚本.

内联SVG的缺点是它不适用于带有SVG插件的IE.但是,无论如何没有人使用插件多年,IE9也将支持内联SVG.