jQuery实现简单拖拽

最新推荐文章于 2020-12-24 07:49:55 发布

yzxzsp11

最新推荐文章于 2020-12-24 07:49:55 发布

阅读量436

点赞数

分类专栏： javascript 文章标签： jquery

本文链接：https://blog.csdn.net/yzxzsp11/article/details/50639957

版权

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery拖拽</title>
</head>
<body>
<div id="div1" style="width: 200px;height: 200px;background-color: blue;position: absolute"></div>
</body>
<script src="jquery-2.2.0.min.js">
</script>
<script>
    //原生写法
//    window.onload=function(){
//        move();
//    };
//    function move(){
//        var oDiv1=document.getElementById('div1');
//        var disX=0;
//        var disY=0;
//        oDiv1.onmousedown=function(ev){
//            var oEvent=ev||event;
//            disX=oEvent.clientX-oDiv1.offsetLeft;   //获得间距
//            disY=oEvent.clientY-oDiv1.offsetTop;
//            document.onmousemove=function(ev){
//                var oEvent=ev||event;
//                var x=oEvent.clientX-disX;   //计算距离边缘距离
//                var y=oEvent.clientY-disY;
//                if(x<20){
//                    x=0;
//                }
//                else if(x>document.documentElement.clientWidth-oDiv1.offsetWidth){
//                    x=document.documentElement.clientWidth-oDiv1.offsetWidth;
//                }
//                if(y<20){
//                    y=0;
//                }
//                else if(y>document.documentElement.clientHeight-oDiv1.offsetHeight){
//                    y=document.documentElement.clientHeight-oDiv1.offsetHeight;
//                }
//                oDiv1.style.left=x+'px';
//                oDiv1.style.top=y+'px';
//            };
//
//            document.onmouseup=function(){
//                document.onmousemove=null;
//                document.onmousedown=null;
//            };
//            return false;  //阻止默认事件,FFbug
//        }
//    }
    //jQuery写法
    $(function(){
        var disX=0;
        var disY=0;
        $('#div1').mousedown(function(ev){
            disX=ev.clientX-$(this).offset().left;
            disY=ev.clientY-$(this).offset().top;
            var oDiv1=document.getElementById('div1');
            $(document).mousemove(function(ev){
                var x=ev.clientX-disX;
                var y=ev.clientY-disY;
                if(x<20){   //限制范围

yzxzsp11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现简单拖拽

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery拖拽</title></head><body><div id="div1" style="width: 200px;height: 200px;background-color: blue;position: absolute"
复制链接

扫一扫