jquery拖动图像

Question

我想在jquery中制作可拖动的图像。首先，我在jquery上的经验是0。话要说一下我要实现的目标。我有固定的宽度/高度div。并且div中包含的图像尺寸较大。所以我希望图像在该div内可拖动，以便用户可以看到整个图像。

有人可以帮忙。考虑到我的jquery流利程度，请对过程进行一些详细说明。

Answer 1

您可以使用以下内容；

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

Answer 2

[您需要jQueryDraggableUI工具。与所有jQuery一样，此代码非常简单：

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

将从标准html标记（您的情况下为IMG创建一个可拖动对象）。为了将其移动性限制在特定区域，您可以查看其containment option。

更新：“什么是'#draggable'和'ready'”？

1. '＃draggable'表示要拖动的元素。井号（＃）代表一个ID。当您添加图片标签时，可以给它一个如下所示的ID：<img src="myimage.jpg" id="draggable" />这将使上面的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' });

此代码将使您可以将ID为dragMe的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 });
        }
    }