我正在嘗試使圖像可拖動，但每當我調整高度和寬度時，它就會停止工作

Question

所以我正在嘗試為我的課堂項目制作一本相冊。 我希望照片能夠在網頁上拖動和移動。 我能夠使我的圖像之一可拖動，但圖像太大，所以我在 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>

Answer 1

您忘記了選擇器中的# ，並遺漏了一些</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>

這應該夠了吧。

Answer 2

歡迎使用堆棧溢出。

我認為你使它比需要的更復雜。 我建議以下示例：

 $(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>元素並調整其大小。 我選擇使用類選擇器，以便代碼更具可移植性。 因此，您可以擁有許多可以拖動和調整大小的圖像。

您也可以考慮不在<div>內使用<img>元素。 在這種情況下，您將使用 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>

希望有幫助。