Добавить изображение на экран по нажатию и позволить ему быть перетаскиваемым / вращаемым - PullRequest
Новая
       11

Добавить изображение на экран по нажатию и позволить ему быть перетаскиваемым / вращаемым

0 голосов
/ 27 марта 2019

Я пытаюсь создать своего рода конструктор карт, в котором пользователь может выбирать из списка предопределенных объектов, и после нажатия на один из них он появится внутри рамки с параметрами ориентации (перетаскивание, вращение, изменение размера).

Я не понимаю, как можно добавить функциональность к объекту, который не определен во время выполнения страницы.

Я нашел много хороших примеров, демонстрирующих, как использовать пользовательский интерфейс Jquery, а также добавление изображения на экран по щелчку, но я никогда не видел, чтобы эти двое были женаты вместе.

Вот хороший пример функции добавления онклика: Добавление изображения на страницу по клику

(Примеров ориентации на клики довольно много)

Вот код, который мне понравился по ссылке (из tjarratt), так что, если кто-то может помочь мне уйти отсюда, это будет проще всего. 

<html>
<head>
<script type="text/javascript">
        function addimage() { 
          var img = document.createElement("img");
          img.src = "http://bricksplayground.webs.com/brick.PNG"; 
          img.height = 50; 
          img.width = 100;

          //optionally set a css class on the image
          var class_name = "foo";
          img.setAttribute("class", class_name);

          document.body.appendChild(img);
        }
</script>
</head>
<body>
    <button onclick="addimage();">Click</button>
</body>
</html>

1 Ответ

1 голос
/ 28 марта 2019

Вот пример, который может вам помочь. Рассмотрим следующий код. 

$(function() {
  function addImage(u, c, t) {
    /***
    Input: URL, Class, Target Object
    Output: jQuery Object of IMG element
    ***/
    if (u == undefined) {
      u = "https://bricksplayground.webs.com/brick.PNG";
    }
    if (c == undefined) {
      c == "";
    }
    if (t == undefined) {
      t = $("#zone");
    }
    var img = $("<img>", {
      src: u,
      class: c,
    }).css({
      width: "50px",
      height: "100px"
    });
    img.appendTo(t);
    return img;
  }

  function makeDrag(o) {
    /***
    Input: jQuery Object
    Output: null
    ***/
    o.draggable({
      containment: "parent"
    });
  }

  $("#add-object").click(function() {
    makeDrag(addImage("https://png.pngtree.com/png_detail/20181008/red-brick-wall-png-clipart_1564742.png", "foo"));
  });
});
#zone {
  width: 300px;
  height: 200px;
}
<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>
<button id="add-object">Add Object</button>
<div id="zone"></div>

При нажатии «Добавить объект» создается элемент Image с определенными атрибутами. Я добавил некоторые значения по умолчанию, поэтому, если вы позвоните, addImage(), он все равно добавит изображение. Вы также можете указать свой собственный URL, класс и целевой объект.

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

...