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>

我建议将<object>用<div>包装，然后对此进行可拖动和可调整大小。在Stack Overflow的其他一些场景中对此进行了讨论。以后，请务必进行彻底搜索。

希望有帮助。

jQuery事件Draggable，Resizeable无法与html'<object>'标记一起使用

1 个答案: