jQuery拖动图片

Question

我希望在jQuery中制作可拖拽的图像。首先，我对jQuery没有任何经验。话虽如此，让我描述一下我的目标。我有一个固定宽度/高度的div，其中包含的图像尺寸很大。因此，我希望图像可以在该div内拖动，以便用户可以看到整个图像。

有人能帮忙吗？请考虑我的jQuery熟练程度，并稍微详细说明过程。

- amit

---

你的意思是像谷歌地图那样吗？ - James

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>

- Shadi Almosri

---

图像拖动时不会停留在DIV的边界处。 - James

你能告诉我如何使图像停止沿着其边缘拖动吗？我的意思是它应该对齐到容器并且在图像之后不应该有任何空白可见。 - amit

如果图像上方有另一个z-index更高的div，则无法移动图像，因为拖动与图像连接，并且您现在正在尝试移动更高层次的div，因此无法移动其下方的内容。 - Shadi Almosri

对于容器的捕捉会相当困难，我已经尝试过了，但是没有成功地让它正常工作，你需要使用一些聪明的CSS定位和约束值进行调整，这需要相当多的微调，也许值得为此设置另一个Stackoverflow问题。 - Shadi Almosri

关于您的其他问题，如果您在网上发布一些代码，那么我可以尝试为您进行调试 :) - Shadi Almosri

Answer 2

你想使用jQuery的可拖动UI工具。与所有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 代码尝试操作它们之前，页面上的所有元素都已完全加载。

- Sampson

---

#draggable是元素的id。例如：<div id="draggable">内容</div>ready是Jquery函数，一旦DOM准备就绪即页面完全渲染，便会执行其中的内容（draggable()）。 - Shadi Almosri

Answer 3

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

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

- PH.

Answer 4

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

这段代码将使得具有ID为dragMe的div可以在文档的body内随意拖动。您还可以编写一个class或id作为限制条件。

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

这段代码将使 dragMe div 可以在 id container 内可拖动。

希望这可以帮到你，否则你应该能在这里找到答案 http://jqueryui.com/demos/draggable/。

- Joel

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

- jerrygarciuh