jquery拖拽图片答案

【问题标题】：jquery drag imagejquery拖拽图片
【发布时间】：2009-06-19 20:22:09
【问题描述】：

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

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

【问题讨论】：

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

标签： javascript jquery dom jquery-ui

【解决方案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>

【讨论】：

图像在 DIV 的边界处不会停止拖动。
但它完全按照用户在问题中的要求:)
你能告诉我如何使图像停止沿其边缘拖动。我的意思是它应该捕捉到容器，并且图像后面不应该有任何可见的空白。
我无法让它工作。图像没有拖动。我的标记与您的完全相同，只是整个容器设置在另一个 div 中。在图像 div 上还有另一个 div（具有更高的 z-index）。同样据我所知，我不需要“获取”由“$”处理的图像元素，对吗？我也通过 DOM 制作了实际的“img”元素。请帮忙。
如果图像上方有另一个具有更高 z 索引的 div，那么您将无法移动图像，因为拖动已连接到图像，您现在正在尝试移动更高层的 div，则无法移动其下方的内容。

【解决方案2】：

您需要 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 代码尝试操作它们之前完全加载。

【讨论】：

#draggable 是元素的id。即
Content
ready 是 Jquery 函数，一旦 DOM 准备就绪，即页面完全呈现，它就会执行其中的内容（ draggable() ）。

【解决方案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 });
    }
}

【讨论】：

【解决方案4】：

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

此代码可以将 ID 为 dragMe 的 div 拖动到文档正文中您想要的任何位置。您还可以编写一个类或 id 作为包含。

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

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

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

【讨论】：

【解决方案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 });
        }
    }

【讨论】：