jquery拖动图像

我想在jquery中制作一个可拖动的图像。 首先，我对jquery的经验是0.说过让我描述一下我想要实现的目标。 我有固定的宽度/高度div。 并且div中包含的图像很大。 所以我希望图像在div中可拖动，以便用户可以看到整个图像。

有人可以帮忙吗 考虑到我的jquery流畅性，请稍微详细说明一下程序。

Answer 1

您可以使用以下内容;

Answer 2

你想要jQuery Draggable UI工具。 与所有jQuery一样，此代码非常简单：

 $(document).ready(function(){ $("#draggable").draggable(); }); 

将从标准html标记（在您的情况下为IMG ）创建可拖动对象。 并且为了限制它在特定区域的移动性，您可以查看其包含选项 。

更新： “什么是’#draggable’和’准备好’”？

1. ‘#draggable’表示您希望能够拖动的元素。 散列（＃）符号表示ID。 添加图片代码时，可能会给它一个如下ID：

   

   这将使上面的javascript使您的图像可拖动，因为它具有jQuery正在寻找的’#draggable’id。

2. '.ready()'是页面加载完成后由浏览器自动引发的方法。 jQuery组鼓励开发人员将所有jQuery代码放在此方法中，以确保在任何jQuery代码尝试操作它们之前完全加载页面上的所有元素。

Answer 3

为了限制这个例子的区域，遏制没有多大帮助。 我已经为垂直滚动实现了这个，需要增强水平限制：

 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 }); } } 

Answer 4

 $('#dragMe').draggable({ containment: 'body' }); 

这段代码可以在你想要的文档正文中拖动带有dragMe ID的div。 您还可以将类或ID编写为包含。

 $('#dragMe').draggable({ containment: '#container' }); 

此代码将使div dragMe能够在id容器内拖动。

希望这有帮助，否则你应该能够在这里找到你的答案http://jqueryui.com/demos/draggable/

Answer 5

扩展PH的答案。 每当图像被拖动到​​底层容器暴露的点时，这将提供弹性回弹：

 stop: function(event, ui) { var helper = ui.helper, pos = ui.position; var h = -(helper.outerHeight() - $(helper).parent().outerHeight()); var w = -(helper.outerWidth() - $(helper).parent().outerWidth()); if (pos.top <= h) { helper.animate({ top: h }); } else if (pos.top > 0) { helper.animate({ top: 0 }); } if (pos.left <= w) { helper.animate({ left: w }); } else if (pos.left > 0) { helper.animate({ left: 0 }); } }