使用JavaScript（或jQuery）拖放到HTML元素内的滚动位置

Question

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

因此，基本上我想将浏览器窗口的位置拖到其他x / y位置，类似于Google Maps的行为。 虽然就我而言，元素有高度和宽度，但是我想避免显示水平滚动条和垂直滚动条。 某些JavaScript库可以做到这一点吗？ 如果是这样，您能指出一个例子吗？

编辑

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

拿这个jFiddle。

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

..并添加以下外部引用：

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

然后添加此行。

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

..准备就绪功能：

$(function() {

Answer 1

这段代码可以完成您要寻找的内容。 它使用jquery ui可拖动扩展名使元素在“视口”内部可拖动。 隐藏在视口中的overflow：隐藏滚动条。

<!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>

使用JavaScript（或jQuery）拖放到HTML元素内的滚动位置

问题描述

编辑

1 个解决方案

解决方案1
0 2014-09-08 22:33:05

使用JavaScript（或jQuery）拖放到HTML元素内的滚动位置

问题描述

编辑

1 个解决方案

解决方案1 0 2014-09-08 22:33:05

解决方案1
0 2014-09-08 22:33:05