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

Question

I'd like to allow the user to drag and drop to a certain position inside of an HTML element (ie: DIV) relative to the current position, assuming the HTML element has content. 我想允许用户相对于当前位置将其拖放到HTML元素内的某个位置（即DIV），假设HTML元素具有内容。 I've only found examples where you can drag and drop an element within another element. 我仅找到了可以在另一个元素中拖放一个元素的示例。

So basically I'd like to drag the browser window position to a different x/y location, similar to how Google Maps behaves. 因此，基本上我想将浏览器窗口的位置拖到其他x / y位置，类似于Google Maps的行为。 Although in my case, there is a height and width for the element, but I want to avoid showing a horizontal scroll bar and a vertical scroll bar. 虽然就我而言，元素有高度和宽度，但是我想避免显示水平滚动条和垂直滚动条。 Is this possible with some JavaScript library? 某些JavaScript库可以做到这一点吗？ If so, can you point me to an example? 如果是这样，您能指出一个例子吗？

Edit 编辑

Noticing some strange things happening when you drag the rectangles across the screen. 注意到在屏幕上拖动矩形时发生了一些奇怪的事情。

Take this jFiddle.. 拿这个jFiddle。

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

..and add an external reference to: ..并添加以下外部引用：

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

Then add this line.. 然后添加此行。

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

..to the on ready function: ..准备就绪功能：

$(function() {

Answer 1

This code should accomplish what you're looking for. 这段代码可以完成您要寻找的内容。 It uses the jquery ui draggable extension to make elements draggable inside the "viewport". 它使用jquery ui可拖动扩展名使元素在“视口”内部可拖动。 The overflow:hidden on the viewport prevents the scrollbar. 隐藏在视口中的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元素内的滚动位置

问题描述

Edit 编辑

1 个解决方案

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

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

问题描述

Edit 编辑

1 个解决方案

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

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