我正在尝试使图像可拖动，但是每当我调整高度和宽度时，它就会停止工作
Posted
技术标签:
【中文标题】我正在尝试使图像可拖动，但是每当我调整高度和宽度时，它就会停止工作【英文标题】：I'm trying to make an image draggable but whenever I resize the height and width it stops working 【发布时间】：2019-04-17 18:26:50 【问题描述】：所以我正在尝试为我的课堂项目制作一本相册。我希望照片能够在网页上拖动和移动。我能够使我的一张图像可拖动，但是图像太大了，所以我在 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>
【问题讨论】：
【参考方案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>
这应该可以解决问题。
【讨论】：
【参考方案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> 元素并调整其大小。我选择使用类选择器，以便代码更便携。因此，您可以拥有许多可以拖动和调整大小的图像。
您也可以考虑不在<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>希望对您有所帮助。
【讨论】：
以上是关于我正在尝试使图像可拖动，但是每当我调整高度和宽度时，它就会停止工作的主要内容，如果未能解决你的问题，请参考以下文章