Question

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

有人可以提供帮助。考虑到我的jquery流畅性，请稍微详细说明一下这个程序。

Answer 1

您可以使用以下内容;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drag Demo</title>

<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
<!--
.container {
    margin-top: 50px;
    cursor:move;
}
#screen {
    overflow:hidden;
    width:500px;
    height:500px;
    clear:both;
    border:1px solid black;
}
-->
</style>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script type="text/javascript">
$(function() {
    $("#draggable").draggable();
});
</script>
</head>

<body>

<div class="container">

    <div id="screen">
        <img src="images/211.jpg" class="drag-image" id="draggable"/>
    </div>

</div>

</body>
</html>

Answer 2

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

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

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

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

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

<img src="myimage.jpg" id="draggable" />

这将使上面的javascript使你的图像可以拖动，因为它具有jQuery正在寻找的'#draggable'id。
'.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 });
        }
    }

jquery拖动图像

5 个答案:

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