繁体   English   中英

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

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

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

所以我正在尝试为我的课堂项目制作一本相册。 我希望照片能够在网页上拖动和移动。 我能够使我的图像之一可拖动,但图像太大,所以我在 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 个回复

您忘记了选择器中的# ,并遗漏了一些</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>

这应该够了吧。

欢迎使用堆栈溢出。

我认为你使它比需要的更复杂。 我建议以下示例:

 $(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>

希望有帮助。

1 如何使我的背景图像按宽度而不是高度调整大小?

现在,我正在使用以下代码来调整背景图片的大小: 当调整浏览器窗口的宽度大小(图像在其侧面被裁剪并稍微变小)时,它看起来很好用,但是当调整高度时,整个图像会缩小,这会使所有内容弄乱。 我想做的是使高度永久不变,但仍然像现在的代码那样调整宽度。 我希望这是有道理的。 我仍然很新。 ...

5 如何使图像自动调整大小以使宽度为100%并相应调整高度?

我有以下简单的XAML页面: 在构造函数中,我调用一个方法来加载图像: 结果在我的(相当大的,高DPI)手机上看起来像这样: imgur链接1 当然,我希望图像自动扩展,以便它占据屏幕的整个宽度。 同时保持纵横比。 但是我怎样才能做到这一点? 我已经尝试将Asp ...

6 我试图让玩家在触发时停止移动

我正在 Unity 中开发 TopDown 2D 游戏。 这个想法是,当玩家踩到某个瓷砖时,会弹出一个带有文本的 UI(已经可以工作)并且玩家停止移动,直到玩家单击按钮(已经编程并可以工作)并且 UI 消失。 我被建议将 RigidBody2D 转为运动学,但它不起作用,它只是做它以前做的事情。 难 ...

9 CSS - 我可以通过改变宽度和高度来调整背景图像的大小吗?

鉴于以下CSS规则, 假设图像xxx.png的尺寸为100px×50px。 如果我需要让#block1上显示的图像看起来更小,我可以简单地改变#block1的宽度和高度,或者我必须先重新调整图像的大小,然后相应地改变#block1的宽度和高度。 谢谢 ...

2010-09-07 02:20:18 3 1251   css
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM