Jquery 事件 Draggable、Resizeable 不适用于 html '<object>' 标签

Question

我在一个项目中使用 Jquery Ui，其中像 <img> 和 <div> 这样的 html 对象被拖动和调整大小，但对于交互式 SVG，我必须使用 <object> 来绘制和更改 svg 元素。但在这个阶段，我无法拖动元素并调整其大小。

我已经尝试过让它可以拖动和调整大小

var newcanvas = $(`<object>`).attr("data","http://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg").css("width","100%");

newcanvas.resizable();
newcanvas.draggable();

注意：newcanvas 是动态添加到某些 div 的对象，但同样的情况适用于 <img> 标签和其他但不适用于对象标签

如何解决这个问题？

Answer 1

做了一些研究，<object> 是一个元素，但它似乎没有被渲染。考虑以下测试：

$(function() {
  function makeObject(d, t) {
    if (t == undefined) {
      t = $(".page");
    }
    var newcanvas = $(`<object>`).attr("data", d).css("width", "50%");
    newcanvas.appendTo(t);
    return newcanvas;
  }

  $("#makeObject").click(function() {
    var c = makeObject("https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg");
    c.draggable().resizable();
  });
  $("#clearObject").click(function() {
    $("object, .objectWrap").remove();
  });
  $("#wrapObject").click(function() {
    var w = $("<div>", {
      class: "objectWrap"
    }).css({
      width: "200px",
      height: "200px"
    }).appendTo(".page");
    var c = makeObject("https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg", w);
    c.css("width", "100%");
    w.draggable().resizable();
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="page">
  <div class="tools">
    <button id="makeObject">Make Object</button>
    <button id="clearObject">Clear Object</button>
    <button id="wrapObject">Make Object w/Wrap</button>
  </div>
</div>

我建议用<div> 包装<object>，然后对其应用可拖动和可调整大小。这在 Stack Overflow 的其他几个场景中进行了讨论。以后一定要彻底搜索。

希望对您有所帮助。