0

我正在尝试在老式框架集中的框架上启用单击和拖动（类似于人们可能在 iPhone 或 iPad 上享受的触摸拖动交互）。

我正在寻找的功能类似于此处显示的功能：http:
//jsfiddle.net/AhC87/2/

我使用 jQuery nicescroll 插件取得了一些小的成功，但它不支持水平滚动，而且看起来相当有问题且不一致（例如，即使在单击被释放后仍继续滚动）。

这是我试图在以下位置启用此行为的界面：
http ://simrtk.net/map/map.php?x=258&y=176

左侧地图界面可以使用右上角的小地图滚动，所有传统的滚动方法都可以使用，但我认为启用点击拖动功能可能会更好，以使过程更加愉快。我也收到了这方面的请求。任何帮助将不胜感激！

注意：我为此使用了摇摇晃晃的旧框架集，因为使用 CSS 将控制侧边栏定位在地图上会导致在较慢的计算机上出现糟糕的性能，因此在这种情况下放弃框架集可能不是一种选择。

4

1 回答 1

0

您只需要集成您提到的 jsfiddle，为此$(document).ready在文件中的代码中添加以下 javascript map_large.js：

$("#map").mousedown(function(e){
    e.preventDefault();
    down=true;
    x=e.pageX;
    y=e.pageY;
    top=$(this).scrollTop();
    left=$(this).scrollLeft();
});

$("body").mousemove(function(e){
    if(down){
        var newX=e.pageX;
        var newY=e.pageY;

        //console.log(y+", "+newY+", "+top+", "+(top+(newY-y)));

        $("#map").scrollTop(top-newY+y);    
        $("#map").scrollLeft(left-newX+x);    
    }
});

$("body").mouseup(function(e){down=false;});
于 2012-10-12T20:47:53.390 回答