使用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