使用JavaScript(或jQuery）在HTML元素中拖放以滚动位置

Drag and drop to scroll position within HTML element using JavaScript (or jQuery)

本文关键字：元素 拖放 位置 滚动 HTML JavaScript jQuery 使用      更新时间：2023-09-26

我想允许用户拖放到HTML元素（即：div）内部相对于当前位置的某个位置，假设HTML元素有内容。我只找到了可以在另一个元素中拖放一个元素的示例。

所以基本上我想把浏览器窗口的位置拖到另一个x/y位置，类似于谷歌地图的行为。虽然在我的情况下，元素有一个高度和宽度，但我想避免显示水平滚动条和垂直滚动条。这在某些JavaScript库中可能吗？如果是，你能给我举个例子吗？

编辑

在屏幕上拖动矩形时，注意到发生了一些奇怪的事情

拿着这个jFiddle

http://jsfiddle.net/08p1dm0x/1/

。。并添加一个外部引用到：

//code.jquery.com/ui/1.11.1/jquery-ui.js

然后添加此行

$("#gfx_holder").draggable();

。。到准备就绪功能：

$(function() {

这段代码应该可以完成您想要的任务。它使用jquery-ui-draggable扩展使元素可以在"视口"中拖动。溢出：隐藏在视口中可阻止滚动条。

<!doctype html>
<html>
<head>
<title>Learning canvas</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<style>
   html, body, #viewPort
   {
    margin:0px;
    padding:0px;
    overflow:hidden;
    height:100%;
    width:100%;
   }
   #map
   {
    position:relative;
     height:1523px;
     width:3000px;
     background-image:url(http://www.mapplace.info/wp-content/uploads/2014/03/world-map-2.jpg);
   }
</style>
<script>
    $(document).ready(function()
    {
        $("#map").draggable();
    });
</script>
</head>
<body>
<div id="viewPort">
    <div id="map"/>
</div>
</body>
</html>
相关文章：