我正在尝试使图像可拖动，但每当我调整高度和宽度时，它就会停止工作

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>

希望有帮助。