Camila Waz 发布于
2019-11-18 09:55:36

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



<script src="http://www.100sucai.com/js/jquery.js"></script> 
<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>

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


当前文章内容为原创转载请注明出处:http://www.good1230.com/detail/2019-11-18/497.html
最后生成于 2020-08-31 16:42:23