首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

HTML5拖拽的简单实例

Posted in HTML / CSS onMay 30, 2016

拖拽相关属性

draggable属性是html5的全局属性，是html5支持拖放操作的方式之一，用来表示元素是否可以被拖放,draggable有三个值，true表示可以拖放，false表示不可以被拖放，auto表示使用浏览器的默认值

XML/HTML Code复制内容到剪贴板
  1. <ul>     
  2.     <li id="item1" draggable="true">列表1</li>  
  3.     <li id="item2" draggable="true">列表2</li>  
  4.     <li id="item3" draggable="true">列表3</li>  
  5.     <li id="item4" draggable="true">列表4</li>  
  6.     <li id="item5" draggable="true">列表5</li>  
  7.     <li id="item6" draggable="true">列表6</li>  
  8. </ul>  

 

拖拽相关的事件

ondragstart：此事件在用户开始拖动元素或选择文本时触发 ondrag:元素正在拖动时触发 ondragend:用户完成元素拖放时触发 ondragleave:当被鼠标拖动的对象离开其容器范围时触发 ondragover:当某个被拖动的对象在另一对象容器范围内拖动时触发此事件，此事件发生在目标元素身上 ondrop:在一个拖动过程中，释放鼠标时触发，此事件作用在目标元素身上

dataTransfer 对象相关方法

setData(format,data):添加自定义数据格式 getData(format):获取自定义的数据格式clearData([format]):清除自定义的数据格式及数据

Event.preventDefault()

此方法是阻止事件的默认行为，在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发

实现案例：

HTML5拖拽的简单实例

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>     
  2. <html>     
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title></title>  
  6.         <style type="text/css">  
  7.             .main{   
  8.                 width: 800px;   
  9.                 /*border: 1px solid #ccc;*/   
  10.                 height: 400px;   
  11.                 margin:0 auto;   
  12.             }   
  13.             .left{   
  14.                 float: left;   
  15.                 width: 25%;   
  16.                 background-color: #666;   
  17.                 height: 370px;   
  18.                 text-align: center;   
  19.                 color: black;   
  20.                 padding-top:30px ;   
  21.                 font-size: 110px;   
  22.             }   
  23.             .right{   
  24.                 float: right;   
  25.                 width: 69%;   
  26.             }   
  27.             .right ul,.right li{   
  28.                margin: 0;   
  29.                padding: 0;   
  30.             }   
  31.             .right li{   
  32.                 list-style: none;   
  33.                 border: 2px dashed  #666;   
  34.                 background-color: #ddd;   
  35.                 height: 60px;   
  36.                 margin-top: 3px;   
  37.                 text-indent: 30px;   
  38.                 line-height: 60px;   
  39.             }   
  40.             .right li:hover{   
  41.                 background-color: #ccc;   
  42.             }   
  43.             #message{   
  44.   
  45.                 width: 800px;   
  46.                 text-align: center;   
  47.                 border: 1px solid black;   
  48.                 margin: 20px auto;   
  49.                 font-size:28px;   
  50.             }   
  51.         </style>  
  52.         <script type="text/javascript">  
  53.             window.onload = function(){   
  54.                 var aLi = document.getElementsByTagName('li');   
  55.                 var oLeft = document.getElementsByClassName('left')[0];   
  56.                 var oMessage = document.getElementById('message');   
  57.   
  58.                 for(var i=0;i<aLi.length;i++){   
  59.                     aLi[i].index = i+1;   
  60.                     aLi[i].ondragstart = function(ev){   
  61.                                                 //事件对象ev   
  62.                         var evev = ev || event;   
  63.   
  64.                         ev.dataTransfer.setData("Text",this.id);   
  65.                     }   
  66.   
  67.                 }   
  68.                 oLeft.ondrop = function(ev){   
  69.   
  70.                     var evev = ev || event;   
  71.                     var data = ev.dataTransfer.getData("Text");   
  72.                     var num = document.getElementById(data).index;   
  73.                      document.getElementById(data).remove();   
  74.   
  75.                     oMessage.innerHTML = "列表"+num+"被放进了垃圾箱";   
  76.   
  77.                     this.style.color = "black";   
  78.   
  79.                     }   
  80.                 oLeft.ondragover = function(ev){   
  81.                     var evev = ev || event;   
  82.                     ev.preventDefault();   
  83.                 }   
  84.                 oLeft.ondragenter = function(){   
  85.                     this.style.color = "#fff";   
  86.                 }   
  87.             }   
  88.         </script>  
  89.     </head>  
  90.     <body>  
  91.         <div class="main">  
  92.             <div class="left">垃圾箱</div>  
  93.             <div class="right">  
  94.                 <ul>  
  95.                     <li id="item1" draggable="true">列表1</li>  
  96.                     <li id="item2" draggable="true">列表2</li>  
  97.                     <li id="item3" draggable="true">列表3</li>  
  98.                     <li id="item4" draggable="true">列表4</li>  
  99.                     <li id="item5" draggable="true">列表5</li>  
  100.                     <li id="item6" draggable="true">列表6</li>  
  101.                 </ul>  
  102.             </div>  
  103.             <div style="clear: both;"></div>  
  104.   
  105.   
  106.         </div>  
  107.         <div id="message">拖到垃圾箱删除列表</div>  
  108.     </body>  
  109. </html>    

以上这篇HTML5拖拽的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

HTML5拖拽的简单实例

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
css3选择器基本介绍
Dec 15 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 HTML / CSS
css3属性选择器 “~”（波浪号） “，”（逗号） “+”（加号）和 “>”（大于号）
Apr 19 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 #HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 #HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 #HTML / CSS
深入理解HTML的FormData对象
May 17 #HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
May 15 #HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 #HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 #HTML / CSS
frozenset(1) el-table(1) Next.js(1) mounted(1) 子查询(1) Mybatis-Plus(3) 脚手架(2) set(1) TableField(1) create(1)
You might like
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
微信小程序实现蓝牙打印
2019/09/23 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
python写入并获取剪切板内容的实例
2018/05/31 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
pytorch中的inference使用实例
2020/02/20 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
美国知名的网上鞋类及相关服装零售商：Shoes.com
2017/05/06 全球购物
西班牙语在线票务市场：SuperBoletería
2019/06/10 全球购物
外贸英语毕业生自荐信
2013/11/14 职场文书
七年级英语教学反思
2014/01/15 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
财务管理专业自荐书
2014/09/02 职场文书
人民调解协议书范本
2014/10/11 职场文书