纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

js拖拽效果 JavaScript实现简单拖拽效果

Nanchen_42   2021-09-14 我要评论
想了解JavaScript实现简单拖拽效果的相关内容吗,Nanchen_42在本文为您仔细讲解js拖拽效果的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:js,拖拽,下面大家一起来学习吧。

先看实现的效果:

思路:里面用到了三个事件,鼠标按下、移动、松开事件

那么首先创建盒子并且给它赋予css样式

HTML:

// html
<div>
    <p>我是个蓝色的盒子</p>
</div>

CSS:

CSS
*{margin: 0;padding: 0;}
        div{
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            position: absolute;
        }
        p{
            width: 100px;
            height: 100px;
            line-height: 100px;
            font-size: 10px;
            color: #fff;
            text-align: center;
            transition: .5s all;
        }
        p:hover{
            transform: translateY(-5px);
            transition: .5s all;
            box-shadow: 10px 10px 5px gray;
}

然后在JS设置相应的方法

var div = document.querySelector('div');
        var p   = document.querySelector('p');
        // 先定义初始化变量x、y
        var x =0;
        var y = 0;
        // var i = 3;
        var TorF= false;
        //盒子里的文字无法被选中
        div.onselectstart = function (e) {
            return false;
        }
        div.addEventListener('mousedown',function(e){
            // client:鼠标按钮时输出鼠标指针的坐标
            x = e.clientX;
            y = e.clientY;
            // 格式:obj.offsetLeft:获取左和上的偏移量
            // 在这里特别说明一下:这个属性是只读的,不能够赋值。
            // 返回当前元素距离父元素(body)左边的距离
            // 这里的l,t并不是声明了一个全局变量,而是创建了一个全局对象的属性。
            l = div.offsetLeft;
            t = div.offsetTop;
            // 鼠标设置移动箭头
            div.style.cursor =  'move';
            p.innerHTML =  '我被按下了 ^_^';
            TorF= true;
        });
        // 当整个屏幕触发移动事件时
        document.addEventListener('mousemove',function(e){
            // 如果为false则终止函数的执行并返回函数的值
            if (Torf == false) {
                return; 
            }
            // 在此函数中定义局部变量
            var twox = e.clientX;
            var twoy = e.clientY;
            // 用获取到的鼠标指针的坐标 - (鼠标指针的坐标 - 偏移量) = 实际鼠标拖动的位置
            // 后面一定要加上px单位,因为本身获取是没有单位的
            var twol = twox - (x-l);
            var twot = twoy - (y-t); 
            div.style.left = twol+'px';
            div.style.top = twot+'px';
            p.innerHTML =  '我正在被拖动  -.-';
        });
        div.addEventListener('mouseup',function(){
            // 松开键盘时停止鼠标移动事件
            TorF= false;
            // 鼠标恢复默认样式
            div.style.cursor = 'default';
            p.innerHTML =  '我被弹开了QAQ';
 })

注意:

1、想控制某一个盒子的位置,必须给盒子添加定位,否则盒子不会动

2、offsetLeft这个属性是只读的,不能够赋值

3、鼠标位置的的计算:鼠标指针的坐标 - (鼠标指针的坐标 - 偏移量) = 实际鼠标拖动的位置


相关文章

猜您喜欢

网友评论

Copyright 2020 www.hao45.cc 【好下载】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式