div标签内部实现左右拖拽功能的js代码

引入 <script src="http://www.100sucai.com/js/jquery.js"></script>

html代码

<div id="bbb" style="border:5px solid #ccc; width:600px; margin:auto;overflow-x:auto">
    <div id="pic" style="width:1500px;height:auto;font-size:36px;">
    getY和getX同样道理，这两个差值就是鼠标相对于对象的定位，
    因为拖拽后鼠标和拖拽对象的相对位置是不变的
    <br><br>
    getY和getX同样道理，这两个差值就是鼠标相对于对象的定位，
    因为拖拽后鼠标和拖拽对象的相对位置是不变的
    <br><br>
    getY和getX同样道理，这两个差值就是鼠标相对于对象的定位，
    因为拖拽后鼠标和拖拽对象的相对位置是不变的
    <br>
    </div>
</div>

js代码

<script type="text/javascript">  
    var drag=function(obj){  

        obj.bind("mousedown",start);  

        function start(event){  
            console.log(666)
            if(event.button==0){//判断是否点击鼠标左键  
                gapX=event.clientX;
                startx = $("#bbb").scrollLeft();  // scroll的初始位置

                //movemove事件必须绑定到$(document)上，鼠标移动是在整个屏幕上的  
                $(document).bind("mousemove",move);  
                //此处的$(document)可以改为obj  
                $(document).bind("mouseup",stop);                           
            }  
            return false;//阻止默认事件或冒泡  
        }  
        function move(event){  
            var left = event.clientX-gapX; // 鼠标移动的相对距离

            $("#bbb").scrollLeft(startx - left );

            return false;//阻止默认事件或冒泡  
        }  
        function stop(){  
            //解绑定，这一步很必要，前面有解释  
            $(document).unbind("mousemove",move);  
            $(document).unbind("mouseup",stop);  
        }  
    }  
    obj=$("#pic");  
    drag(obj);//传入的必须是jQuery对象，否则不能调用jQuery的自定义函数  
</script>