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

Question

所以我正在尝试为我的 class 项目制作一本相册。我希望照片能够在网页上拖动和移动。我能够使我的其中一张图片可拖动，但是图片太大了，所以我在 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

欢迎来到 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> 元素。我选择使用 class 选择器，这样代码更便于移植。所以你可以有很多可以拖动和调整大小的图像。

您也可以考虑不在 <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>

希望对您有所帮助。

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

I'm trying to make an image draggable but whenever I resize the height and width it stops working

css

jquery

jquery-ui

draggable

jquery-ui-draggable