HTML5新特性 拖拽使用心得
本文主要介绍了拖拽和拖放的几个属性
先构建一个框架
![AAffA0nNPuCLAAAAAElFTkSuQmCC](https://i-blog.csdnimg.cn/blog_migrate/6d9a2c637f6a4ebb094f5843a1597f01.png)
目标区域
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