Я пытаюсь сделать изображение перетаскиваемым, но когда я изменяю высоту и ширину, оно перестает работать - PullRequest
Новая
       30

Я пытаюсь сделать изображение перетаскиваемым, но когда я изменяю высоту и ширину, оно перестает работать

0 голосов
/ 14 ноября 2018

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

Однако всякий раз, когда я изменял его размер, функция перетаскивания перестала работать.Так что я не уверен, что я делаю не так. 

<body>
<div id="draggable" class="ui-widget-content">
<div id="resizeableDiv" class="ui-widget-content">

<div id="img1">
<img src="imgs/alexa.jpg">
</div>
</body>

<script>
$(function() {
$("resizableDiv").resizable();
});

$( function() {
$( "#draggable" ).draggable();
} );
</script>

Ответы [ 2 ]

0 голосов
/ 15 ноября 2018

Добро пожаловать в Stack Overflow.

Я думаю, вы делаете это более сложным, чем необходимо.Я бы посоветовал следующий пример: 

$(function() {
  $(".resize").resizable({
    handles: "ne, nw, se, sw",
    aspectRatio: true
  });
  $(".ui-resizable-handle-se").removeClass("ui-icon ui-icon-gripsmall-diagonal-se");
  $(".drag").draggable();
});
.resize img {
  width: 100%;
  height: 100%;
}

.ui-resizable-handle {
  width: 8px;
  height: 8px;
  background: #fff;
  border: 1px solid #000;
}
<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 id="div-1" class="drag resize edit-image ui-widget-content">
  <img src="//i.imgur.com/KcxrVPk.jpg">
</div>

Если вам не нравятся дополнительные ручки, вам не нужно их использовать.В этом примере вы перетаскиваете и изменяете размер только одного элемента <div>.Я решил использовать селектор класса, чтобы код был немного более переносимым.Таким образом, вы можете иметь много изображений, которые можно перетаскивать и изменять их размер.

Вы можете также рассмотреть возможность использования элемента <img> внутри <div>.в этом случае вы должны использовать CSS, чтобы установить свойство background-image для рассматриваемого изображения.Как то так: 

$(function() {
  $(".edit-image").each(function(ind, el) {
    var imgSrc = $(el).data("src");
    var img = $("<img>", {
      src: imgSrc,
      style: "display: none;"
    }).appendTo("body");
    $(el).css({
      "background-image": "url('" + imgSrc + "')",
      width: img.width(),
      height: img.height()
    });
    img.remove();
  });

  $(".resize").resizable({
    handles: "ne, nw, se, sw",
    aspectRatio: true,
    resize: function(e, ui) {
      var w = ui.size.width,
        h = ui.size.height;
      $(this).css("background-size", w + "px " + h + "px");
    }
  });

  $(".drag").draggable();
});
.resize img {
  width: 100%;
  height: 100%;
}

.edit-image {
  background-repeat: no-repeat;
}

.ui-resizable-handle {
  width: 8px;
  height: 8px;
  background: #fff;
  border: 1px solid #000;
}
<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 id="div-1" class="drag resize edit-image ui-widget-content" data-src="//i.imgur.com/KcxrVPk.jpg">
</div>

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

0 голосов
/ 14 ноября 2018

Вы забыли # в своем селекторе и пропустили некоторые </div> теги: 

<body>
<div id="draggable" class="ui-widget-content"></div>
<div id="resizeableDiv" class="ui-widget-content"></div>

<div id="img1">
<img src="imgs/alexa.jpg">
</div>
</body>

<script>
  $(function () {
      $("#resizableDiv").resizable();
  });

  $(function () {
      $("#draggable").draggable();
  });
</script>

Это должно сработать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...