Question

我正在尝试在旧式框架内的框架上启用点击和拖动（类似于iPhone或iPad上可能会喜欢的触摸 - 拖动交互）。

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

我使用jQuery nicescroll插件取得了一些小小的成功，但是它不支持水平滚动，看起来相当错误和不一致（例如，即使在点击发布后仍继续滚动）。

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

左手地图界面可以使用右上角的小地图滚动，所有传统的滚动方法都可以工作，但我认为启用点击拖动功能可以让流程更加流畅其乐融融。我也收到了这方面的要求。任何帮助都将受到高度赞赏！

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

Answer 1

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

$("#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;});

Answer 2

检查此页面源代码，希望您能找到有用的内容。 http://www.areaaperta.com/nicescroll/test/maps2.html

如何使用jQuery单击拖动框架的内容？

2 个答案: