H5的draggable元素拖放属性

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>拖放</title><style>h2 {font-size: 20px;color: gray;}div#left, div#right {width: 120px;height: 300px;float: left;margin: 10px 100px 10px 0px;border: 1px solid #000;overflow-y: auto;}div label {font-size: 22px;font-weight: bold;width: 100%;display: inline-block;padding: 4px 0;text-align: center;margin: 0px 0 2px 0;color: #fff;background-color: gray;}</style>
</head><body><div><h2>H5拖放</h2><!-- 左边元素框 --><div id="left"><label draggable="true">A</label><label draggable="true">B</label><label draggable="true">C</label><label draggable="true">D</label><label draggable="true">E</label></div><!-- 右边元素框 --><div id="right"></div></div><script>var moveItem = document.getElementsByTagName('label');for (let i = 0; i < moveItem.length; i++) {//动态设置label元素idmoveItem[i].setAttribute('id', 'label' + i);moveItem[i].ondragstart = function (ev) {// dataTransfer：拖放的数据传递对象// dataTransfer.setData() 方法设置被拖数据的数据类型和值ev.dataTransfer.setData("Text", this.id);};}// 事件// dragstart   //当用户开始拖动一个元素或者一个选择文本的时候 dragstart 事件就会触发。// drag　　    //当元素或者选择的文本被拖动时触发 drag 事件 (每几百毫秒)// dragenter   //当拖动的元素或被选择的文本进入有效的放置目标时， dragenter 事件被触发。// dragleave   //当一个被拖动的元素或者被选择的文本离开一个有效的拖放目标时，将会触发dragleave 事件// dragover    //当元素或者选择的文本被拖拽到一个有效的放置目标上时，触发 dragover 事件(每几百毫秒触发一次)。// drop       //当一个元素或是选中的文字被拖拽释放到一个有效的释放目标位置时，drop 事件被抛出。// dragend    //拖放事件在拖放操作结束时触发(通过释放鼠标按钮或单击escape键)// 左=>右document.getElementById('right').ondragover = function (ev) {console.log('dragover event');ev.preventDefault();  //阻止向上冒泡ev.stopPropagation();};document.getElementById('right').ondrop = function (ev) {// 阻止默认事件ev.preventDefault();ev.stopPropagation();  // 火狐浏览器不生效var id = ev.dataTransfer.getData('Text');// 当前拖动的dom元素var elem = document.getElementById(id);// 目标元素var toElem = ev.target.id;if (toElem == 'right') {// div#left元素内的子元素拖放到div#right元素内，拖放元素添加到div#right元素尾部this.appendChild(elem);} else {// div#left元素内的子元素位置互换，拖放元素插入到目标元素之前this.insertBefore(elem, document.getElementById(toElem));}}// 右=>左document.getElementById('left').ondragover = function (ev) {ev.preventDefault(); //阻止向上冒泡};document.getElementById('left').ondrop = function (ev) {ev.preventDefault();ev.stopPropagation();var id = ev.dataTransfer.getData('Text');var elem = document.getElementById(id);var toElem = ev.target.id;if (toElem == 'left') {// div#right元素内的子元素拖放到div#left元素内，拖放元素添加到div#left元素尾部this.appendChild(elem);} else {// div#right元素内的子元素位置互换，拖放元素插入到目标元素之前this.insertBefore(elem, document.getElementById(toElem));}}</script></body></html>

示例

H5的draggable元素拖放属性相关推荐

关于H5、CSS3新增的一些元素及属性
H5简介 HTML5是HTML最新的修订版本,具有新的元素,属性和行为. HTML5规范于2014年10月29日由万维网联盟正式宣布. 随着移动化的进程,HTML5终将成为主流. H5的新变化 H5文 ...
H5新增的标签以及属性
H5的更新加强了浏览器的功能,减少了插件的使用(Flash). video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 svg 定义矢量图 time 日期和时间 ...
H5新增的标签和属性
声明 Web 世界中存在许多不同的文档.只有了解文档的类型,浏览器才能正确地显示文档. HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML ...
HTML 元素和属性--备份
元素/属性描述绝大多数HTML元素下列属性适用于绝大多数HTML元素 accesskey 用于为元素添加键盘快捷键 aria-* 用于关联由WAI-ARIA指定的可访问性属性值 class 用于 ...
HTML5所有常用元素和属性
HTML5所有常用元素和属性 - 注释- <html>根元素- <head>页面头部分,可以包含如下子元素> <script> ...
angular跳转指定页面_通过 angular CDK 实现页面元素拖放
通过导入@angular/cdk/drag-drop模块我们可以轻松实现元素在页面中得拖放功能,如元素在页面中随意拖动.在特定区域内拖动亦或对列表进行拖放排序等等. 通过 angular CDK 实现 ...
Html5学习笔记1 元素标签属性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
《 HTML5 》— HTML5页面元素及属性
HTML5页面元素及属性 1.无序列表-ul元素的使用 <!doctype html> <html> <head> <meta charset="u ...
H5 视频Video 元素及常用事件播放暂停初始化设置播放时间禁用下载等
H5 视频Video 元素及常用事件播放暂停初始化设置播放时间常用属性自动播放: autoplay 显示常用工具栏: controls 是否重复播放: loop 视频总长度: durati ...

H5的draggable元素拖放属性

H5的draggable元素拖放属性相关推荐

最新文章

热门文章