html5默认拖拽好用吗,HTML5新特性 拖拽使用心得

HTML5新特性 拖拽使用心得

本文主要介绍了拖拽和拖放的几个属性

先构建一个框架

        

目标区域

draggable

为了使元素可拖动，将draggable属性设置为true

class="lazyload" src="https://i-blog.csdnimg.cn/blog_migrate/6d9a2c637f6a4ebb094f5843a1597f01.png" data-original="b5208ba59f1f064a2d39f991bc1e4dba.jpg"

alt="可拖动的图片"

draggable="true"/>

ondragstart

作用于拖拽元素上，当拖拽元素被拖动的时候触发此事件

class="lazyload" src="https://i-blog.csdnimg.cn/blog_migrate/6d9a2c637f6a4ebb094f5843a1597f01.png" data-original="b5208ba59f1f064a2d39f991bc1e4dba.jpg"

alt="可拖动的图片"

draggable="true"

οndragstart="start()"/>

ondragenter

据张鑫旭的文章《HTML5 drag & drop 拖拽与拖放简介

》中描述

目标元素设置

οndragenter="enter()">

目标区域

关于这个属性，在几个主流的浏览器Safari、Chrome、Firefox、Opera下进行了测试。并不是当拖拽元素进入目标元素的时候触发，而是拖拽过程中，作用于拖拽元素上的拖拽点进入目标元素的时候触发。简而言之，就是鼠标位置进入目标元素所在区域，ondragenter事件触发，可触发多次。

ondragleave

作用于目标元素上，拖拽元素上的光标点离开目标区域时触发ondragleave属性。

ondragover

作用于目标元素上，当拖拽元素在目标元素上移动的时候触发。经测试，光标在目标元素区域内移动会触发ondragover事件，当光标落在目标区域外，即使拖拽元素仍在目标区域内，ondragover事件无法触发

οndragenter="enter()"

οndragοver="over()">

目标区域

ondrop

作用于目标元素上，当光标在目标区域内，松开鼠标时触发ondrop事件。

οndragenter="enter()"

οndragοver="over()"

οndrοp="letGo()">

目标区域

注意事项：①需要在ondragover事件中执行preventDefault()阻止默认事件，否则无法触发ondrop事件。②需要配合ondragover事件使用。

ondragend

作用于拖拽元素，拖拽完成时触发

ondragexit

据点点乐淘淘的文章《H5 拖放事件详解》描述

(既然不常用就先不研究它啦，需要的时候再补充)

贴一个小demohtml>

Document

*{            transition: 2s;

}        #wrap{            width: 400px;            padding: 20px 0;            margin: 0 auto;            background-color: #e8e5e5;            text-align: center;

}        #drop{            position: relative;            width: 300px;            height: 300px;            line-height: 300px;            margin: 0 auto;            border: 1px solid;            text-align: center;            font-size: 30px;            border-radius: 20%;

}        #drag{            border-radius: 20%;

}        #imgWrap{            width: 250px;            height: 221px;            margin: 0 auto;            margin-bottom: 10px;

}        #notice{            position: absolute;            width: 100%

}        .change{            animation: change .1s 10;            /*animation-iteration-count: 10;*/

}

@keyframes change{

0%{                background-color: #fff;

}

100%{                background-color: red;

}

}    

            

将图片拖入此处

  

(有没有大神教我怎么在代码块内正确的写img标签，我写的发布之后总会变样了，so sad...)

欢迎小伙伴们指正

作者：三井豆

链接：https://www.jianshu.com/p/1710b695ce44