jquery拖动图像
jquery拖动图像
提问于 2009-06-19 20:22:10
我想在jquery中创建一个可拖动的图像。首先，我使用jquery的经验是0。话虽如此，让我描述一下我想要实现的目标。我有固定的宽度/高度div。并且包含在div中的图像很大。所以我希望图像在div中是可拖动的，这样用户就可以看到整个图像。
有人能帮帮忙吗。考虑到我的jquery流利程度，请稍微详细说明一下程序。
回答 5
Stack Overflow用户
回答已采纳
发布于 2009-06-19 21:03:12
您可以使用以下命令；
$(function() {
$("#draggable").draggable();
});.container {
margin-top: 50px;
cursor: move;
}
#screen {
overflow: hidden;
width: 200px;
height: 200px;
clear: both;
border: 1px solid black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="container">
<div id="screen">
<img src="https://picsum.photos/200/200" class="drag-image" id="draggable" />
</div>
</div>
Stack Overflow用户
发布于 2009-06-19 20:23:42
您需要jQuery Draggable UI工具。与所有jQuery一样，这方面的代码非常简单：
$(document).ready(function(){
$("#draggable").draggable();
});将从标准的html标记(在本例中为IMG )创建一个可拖动对象。为了限制它在特定地区的移动性，你可以查看它的containment option。
更新：“什么是'#draggable‘和’ready‘？”
- '#draggable‘表示您希望能够拖动的元素。散列(#)符号表示ID。当您添加图像标签时，可能会为其指定一个id，如下所示：
<img src="myimage.jpg" id="draggable" />
这将使上面的javascript使您的图像可拖动，因为它具有jQuery正在寻找的'# draggable‘id。
'.ready()'是在页面加载完成后由浏览器自动引发的方法。jQuery组鼓励开发人员将所有jQuery代码放在此方法中，以确保在任何jQuery代码尝试操作它们之前，页面上的所有元素都已完全加载。
Stack Overflow用户
发布于 2011-07-02 07:19:36
在本例中，为了将范围限制在一个区域内，遏制并没有太大的帮助。我已经为垂直滚动实现了这一点，需要增强水平限制：
stop: function(event, ui) {
var helper = ui.helper, pos = ui.position;
var h = -(helper.outerHeight() - $(helper).parent().outerHeight());
if (pos.top >= 0) {
helper.animate({ top: 0 });
} else if (pos.top <= h) {
helper.animate({ top: h });
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1019873
复制相关文章
相似问题
腾讯云开发者
