События Jquery Draggable, Resizeable не работают с тегом html '<object>' - PullRequest
Новая
       18

События Jquery Draggable, Resizeable не работают с тегом html '<object>'

0 голосов
/ 14 мая 2019

Я использую Jquery Ui в проекте, где объекты html, такие как <img> и <div>, перетаскиваются и изменяются в размерах, но для интерактивного 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> и другим, но не с тегом объекта

Как решить эту проблему?

1 Ответ

1 голос
/ 14 мая 2019

Сделал небольшое исследование, и <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>, а затем применить к нему перетаскиваемый и изменяемый размер.Это обсуждается в нескольких других сценариях переполнения стека.В будущем обязательно тщательно ищите.

Надеюсь, это поможет.

...