H5实现拖拽

最新推荐文章于 2024-04-08 09:57:15 发布

wswtecblog

最新推荐文章于 2024-04-08 09:57:15 发布

阅读量760

点赞数

分类专栏：原生js H5 文章标签： H5拖拽 js

本文链接：https://blog.csdn.net/WSWTPSWLT/article/details/102690062

版权

原生js 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

利用原生js实现元素拖动实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浪子——拖拽</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    #box{
        width:200px;
        height: 300px;
        background-color:blanchedalmond;
        position:absolute;
        top:0px;
        left:0px;
    }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
    let box=document.getElementById('box');
    box.onmousedown=function(e){    
        let x=e.clientX-this.offsetLeft;
        let y=e.clientY-this.offsetTop;
      //  console.log(1)
        document.onmousemove=function(e){
            box.style.cssText=`left:${e.clientX-x}px;top:${e.clientY-y}px;`;
        }
        document.onmouseup=function(e){
            document.onmouseup=null;
            document.onmousemove=null;
        }
    }
    </script>
</body>
</html>

注解：

offset属性：

（1）.如果父辈元素中有定位的元素，那么就返回距离当前元素最近的定位元素边缘的距离。

（2）.如果父辈元素中没有定位元素，那么就返回相对于body左边缘距离。

鼠标事件解析：

click：单击

dblclick：双击

mousedown：鼠标上的按钮被按下触发的事件

mouseup：鼠标按下后，松开时触发的事件

mouseover：鼠标悬浮

mouseout：鼠标离开

mousemove：鼠标移动

mouseenter：鼠标进入

mouseleave：鼠标离开

Event对象 clientX/Y事件定义和用法

clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。

用法： event.clientX

clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的垂直坐标。

用法： event.clientY

利用h5进行拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>H5拖拽</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    html ,body{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;

    }
    div{
        width:200px;
        height: 300px;
        user-select: none;
    }
    #left{
       background-color: rgb(161, 201, 19);
   
    }
    #right{
       background-color: rgb(11, 138, 170);
    }
    </style>
</head>
<body>
    <div id="left">目标元素</div>
    <div id="right" draggable="true">拖动元素</div>
    <script>
    const left=document.getElementById('left');
    const right=document.getElementById('right');
    let num=0;
    //拖拽开始的时候进行移动
    right.ondragstart=function(){
        this.style.background='#0f0'
       
    }
    //ondrag 连续拖拽
    right.ondrag=function(){
        console.log(num++)
    }
    //ondragend 拖拽结束
    right.ondragend=function(){
        this.style.background='#ccc'
    }
    //ondragenter 目标拖拽元素 ：被迫进行反应 结合拖拽元素进行反应
     left.ondragenter=function(){
         this.innerHTML="释放鼠标"
     }
     //ondragover 拖拽持续触发过程
     left.ondragover=function(e){
        console.log(num++)
        //阻止默认事件
        e.preventDefault();
        //e.stopPropagation()只要在click事件中，就不会触发上层click事件。
        e.stopPropagation();
        return false;
     }
    //ondragleave  拖拽离开时触发
     left.ondragleave=function(){
         this.innerHTML="请托诶进来"
     }
     left.ondrop=function(){
         document.body.removeChild(right);
     }

    </script>
</body>
</html>

注：

draggable 属性规定元素是否可拖动。

提示：链接和图像默认是可拖动的。

提示：draggable 属性常用在拖放操作中。请在我们的拖放教程中学习更多内容。

draggable 属性是 HTML5 中的新属性。

属性值

值	描述
true	规定元素的可拖动的。
false	规定元素不可拖动。
auto	使用浏览器的默认行为。

在拖放的过程中会触发以下事件：

在拖动目标上触发事件 (源元素):

ondragstart - 用户开始拖动元素时触发

ondrag - 元素正在拖动时触发

ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:

ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件

ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件

ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

语法

HTML 中：

<element οndragstart="myScript">

JavaScript 中：

object.οndragstart=function(){myScript};

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("dragstart", myScript);

user-select

语法：

user-select：none |text| all | element

默认值：text

适用于：除替换元素外的所有元素

继承性：无

动画性：无

计算值：指定值

取值：none：

文本不能被选择

text：可以选择文本

all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。

element：可以选择文本，但选择范围受元素边界的约束

说明：

设置或检索是否允许用户选中文本。

IE6-9不支持该属性，但支持使用标签属性 onselectstart="return false;" 来达到 user-select:none 的效果；Safari和Chrome也支持该标签属性；

直到Opera12.5仍然不支持该属性，但和IE6-9一样，也支持使用私有的标签属性 unselectable="on" 来达到 user-select:none 的效果；unselectable 的另一个值是 off；

除Chrome和Safari外，在其它浏览器中，如果将文本设置为 -ms-user-select:none;，则用户将无法在该文本块中开始选择文本。不过，如果用户在页面的其他区域开始选择文本，则用户仍然可以继续选择将文本设置为 -ms-user-select:none; 的区域文本；

对应的脚本特性为userSelect。

justify-content语法例如以下：

justify-content: flex-start | flex-end | center | space-between | space-around

參数说明例如以下：

flex-start

弹性项目向行头紧挨着填充。

这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线。而兴许弹性项依次平齐摆放。

flex-end

弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而兴许弹性项依次平齐摆放。

center

弹性项目居中紧挨着填充。（假设剩余的自由空间是负的，则弹性项目将在两个方向上同一时候溢出）。

space-between

弹性项目平均分布在该行上。假设剩余空间为负或者仅仅有一个弹性项。则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐。而最后1个弹性项的外边距和行的main-end边线对齐。然后剩余的弹性项分布在该行上。相邻项目的间隔相等。

space-around

弹性项目平均分布在该行上，两边留有一半的间隔空间。

假设剩余空间为负或者仅仅有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比方是20px）。同一时候首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

justify-content属性取值效果演示样例

wswtecblog

关注

0
点赞
踩
2

收藏

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

利用原生js实现元素拖动实例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...
复制链接

扫一扫