HTML5高阶实例之Drag&Drop

最新推荐文章于 2024-06-01 13:39:13 发布

万少博

最新推荐文章于 2024-06-01 13:39:13 发布

阅读量455

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/wanshaobo888/article/details/79594646

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

最新更新时间：2018年3月27日21:53:27

`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`

1、原生拖放-概述

对于拖放事件而言，默认情况下，浏览器不会在拖动期间改变被拖动元素的外观，但你可以自己修改。不过，大多数浏览器会为正被拖动的元素创建一个半透明的副本，这个副本始终随着光标移动。如下图所示。
默认情况下，图片、链接和文本是可以拖动的，也就是说img标签、a标签和选中的文字可以被拖动。
HTML5为所有HTML元素规定了一个draggable属性，img标签、a标签的默认值是true，其他元素默认值是false。

这里写图片描述

所有元素都支持放置目标事件，但默认是不允许放置的，即默认不会触发drop事件。如果想让某元素成为有效的放置目标，需要重写dragenter、dragover、drop事件。

2、使用注意事项

事件名称	简要描述	是否必须重写
dragstart	按下并移动鼠标，被拖动元素此时触发该事件，触发一次	是
dragenter	元素拖动到放置目标上，触发一次	是
dragover	被拖动元素进入放置目标的范围内移动时，持续触发多次	是
drop	被拖动元素放入了放置目标中，触发一次	是

dataTransfer对象

dataTransfer对象，它是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据。由于它是事件对象的属性(event.dataTransfer)，所以只能在拖放事件的事件处理程序中访问。dataTransfer对象两个主要方法：
event.dataTransfer.setData();
event.dataTransfer.getData();
注意：在dragstart事件中通过event.dataTransfer.setData(‘text’,‘wanshaobo’)保存在dataTransfer对象中的数据，只能在drop事件处理程序中读取event.dataTransfer.getData(‘text’)

3、实例一

概述：实现任务进度完成情况的可视化方案，包括未开始、进行中和已完成，任务标签可以在不同进度框中随意拖放。
代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5-drag&drop</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    #container{
        /*font-size: 0;*/
        clear: both;
    }
    .dropTarget{
        width: 200px;
        height: 500px;
        background: #fff;
        border: 1px solid deeppink;
        /*display: inline-block;*/
        margin-left: 20px;
        margin-top: 20px;
        float: left;
        text-align: center;
    }
    #draggable{
        /*font-size: 0;*/
        /*子元素人为设置为inline-block，父元素需要设置0字号以消除子元素间距*/
    }
    .child{
        width: 200px;
        height: 40px;
        color: #fff;
        font-size: 14px;
        text-align: center;
        line-height: 40px;
        border-radius: 20px;
        margin-top: 5px;
    }
    .child-img{
        width: 100px;
        height: 100px;
    }
    .title{
        margin-left: 20px;
        float: left;
        width: 200px;
        text-align: center;
        border: 1px solid #11baaa;
        line-height: 30px;
        border-radius: 15px;
        color: #aaccbb;
    }
    .clearBoth{
        clear: both;
    }
    #top-title{
        width: 640px;
        text-align: center;
        line-height: 50px;
        font-size: 22px;
        color: deeppink;
        font-weight: bolder;
        margin-left: 20px;
    }
</style>
<body>
<div id="top-title">我的一天</div>
<div class="clearBoth">
    <div class="title">准备做的事情</div>
    <div class="title">正在做的事情</div>
    <div class="title">已做完的事情</div>
</div>
<div id="container">
    <div id="start" class="dropTarget" ondrop="drop(event)" ondragover="dragover(event)">
        <img id="five" class="child-img" src="./wsb.jpg" alt="" ondragstart="dragstart(event)">
        <div id="one" class="child" style="background: #ff7777" draggable="true" ondragstart="dragstart(event)">洗漱</div>
        <div id="two" class="child" style="background: #aaccbb" draggable="true" ondragstart="dragstart(event)">吃早饭</div>
        <div id="three" class="child" style="background: #ad8888" draggable="true" ondragstart="dragstart(event)">坐公交去上班</div>
        <div id="four" class="child" style="background: #f00aaa" draggable="true" ondragstart="dragstart(event)">到公司了打卡</div>
    </div>
    <div id="doing" class="dropTarget" ondrop="drop(event)" ondragover="dragover(event)">

    </div>
    <div id="end" class="dropTarget" ondrop="drop(event)" ondragover="dragover(event)">

    </div>
</div>
</body>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    function dragstart(ev) {
        ev.dataTransfer.setData("Text",ev.target.id);//获取拖动元素实例
    }
    function dragenter(ev) {
        ev.preventDefault();//dragenter事件的默认行为是该元素不允许其他元素放入，阻止默认行为之后，其他元素即可放入
    }
    function dragover(ev) {
        ev.preventDefault();//dragover事件的默认行为是该元素不允许其他元素放入，阻止默认行为之后，其他元素即可放入
    }
    //必须重写dragenter事件和dragover事件，阻止这两个事件的默认行为触发，才能触发drop事件
    function drop(ev) {
        ev.preventDefault();//在Firefox3.5+中，放置事件的默认行为是打开被放到放置目标上的URL，为了兼容性，需要取消drop事件的默认行为
        var data = ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
</script>
</html>

作品如下

这里写图片描述

4、实例二

概述：子元素在父元素中随意拖放，但不能超出父元素。
分析：子元素超出父元素分为两种情况，第一，释放子元素时鼠标已经出界；第二，释放子元素时鼠标没有出界，但子元素出界；
代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5-drag&drop</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .dropTarget{
        width: 600px;
        height: 400px;
        background: #fff;
        border: 1px solid deeppink;
        margin-left: 20px;
        margin-top: 40px;
    }
    #child{
        width: 100px;
        height: 60px;
        position: relative;
        box-sizing: border-box;
        background: #ff7777;
    }
</style>
<body>
<div id="start" class="dropTarget" ondrop="drop(event)" ondragover="dragover(event)">
    <div
        id="child"
        onmousedown="mousedown(event)"
        draggable="true"
        ondragstart="dragstart(event)"
        ondrag="drag(event)"
        ondragend="dragend(event)"

    ></div>
</div>
</body>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    var relativeX = 0;//可移动元素相对于父元素的位置
    var relativeY = 0;
    var mousedownX = 0;//鼠标在可移动元素上单击时，相对于该元素的位置 0 < x < 100
    var mousedownY = 0;
    var draggableEle = document.getElementById('child');
    function dragstart(ev) {
        //ev.dataTransfer.setData("Text",ev.target.id);//获取拖动元素实例
    }
    function drag(ev) {

    }
    function mousedown(ev) {
        //ev对象下offsetX offsetY鼠标在该移动元素上的位置
        mousedownX = ev.offsetX;
        mousedownY = ev.offsetY;
    }
    function dragend(ev) {
        //ev对象下screenX clientX pageX x都相同
        //ev对象下clientY pageY y都相同，相对于可视区域的垂直位置；但screenY不同，screenY是相对于屏幕的垂直位置
        //ev对象下offsetX offsetY鼠标移动的位移+鼠标在该移动元素上的位置
        //DOM元素属性操作方法 getAttribute()、setAttribute()、removeAttribute()
        //DOM元素样式操作方法 elm.style.color 获取和赋值
        relativeX += ev.offsetX - mousedownX;
        relativeY += ev.offsetY - mousedownY;
        //draggableEle.setAttribute('style','left:'+ relativeX + 'px;top:' + relativeY + 'px');//失效，因为重置了所有属性，丢失了宽高
        //水平方向
        if(ev.screenX <= 20 || ev.screenX >= 620){//鼠标出界
            if(ev.screenX <= 20){//父元素相对于屏幕的margin-left: 20px;
                draggableEle.style.left = 0 + 'px';
                relativeX = 0;//注意：此处没有px
            }else if(ev.screenX >= 620){//父元素宽600 + 20
                draggableEle.style.left = 500 + 'px';//600-100
                relativeX = 500;//注意：此处没有px
            }else{
                draggableEle.style.left = relativeX + 'px';
            }
        }else{//元素出界鼠标没有出界
            if(ev.screenX <= mousedownX + 20){
                draggableEle.style.left = 0 + 'px';
                relativeX = 0;//注意：此处没有px
            }else if(ev.screenX >= mousedownX + 520){//600-100+20
                draggableEle.style.left = 500 + 'px';
                relativeX = 500;//注意：此处没有px
            }else{
                draggableEle.style.left = relativeX + 'px';
            }

        }
        //垂直方向
        if(ev.pageY <= 20 || ev.pageY >= 440){//鼠标出界
            if(ev.pageY <= 40){
                draggableEle.style.top = 0 + 'px';
                relativeY = 0;//注意：此处没有px
            }else if(ev.pageY >= 440){
                draggableEle.style.top = 340 + 'px';
                relativeY = 340;//注意：此处没有px
            }else{
                draggableEle.style.top = relativeY + 'px';
            }
        }else{//元素出界鼠标没有出界
            if(ev.pageY <= mousedownY + 40){
                draggableEle.style.top = 0 + 'px';
                relativeY = 0;//注意：此处没有px
            }else if(ev.pageY >= mousedownY + 380){//400-60+40
                draggableEle.style.top = 340 + 'px';
                relativeY = 340;//注意：此处没有px
            }else{
                draggableEle.style.top = relativeY + 'px';
            }
        }
    }
    //必须重写dragenter事件和dragover事件，阻止这两个事件的默认行为触发，才能触发drop事件
    function dragenter(ev) {
        ev.preventDefault();//dragenter事件的默认行为是该元素不允许其他元素放入，阻止默认行为之后，其他元素即可放入
    }
    function dragover(ev) {
        ev.preventDefault();//dragover事件的默认行为是该元素不允许其他元素放入，阻止默认行为之后，其他元素即可放入
    }
    //在Firefox3.5+中，放置事件的默认行为是打开被放到放置目标上的URL，为了兼容性，需要取消drop事件的默认行为
    function drop(ev) {
        ev.preventDefault();
    }
</script>
</html>

作品如下

这里写图片描述

感谢阅读，欢迎评论^-^

`打赏我吧^-^`

万少博

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5高阶实例之Drag&Drop

更新日期：2018年3月27日21:53:271、原生拖放-概述对于拖放事件而言，默认情况下，浏览器不会在拖动期间改变被拖动元素的外观，但你可以自己修改。不过，大多数浏览器会为正被拖动的元素创建一个半透明的副本，这个副本始终随着光标移动。如下图所示。&amp;amp;amp;amp;gt; 默认情况下，图片、链接和文本是可以拖动的，也就是说img标签、a标签和选中的文字可以被拖动。...
复制链接

扫一扫