JavaScript一个拖动元素的实例
Posted newAdmin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript一个拖动元素的实例相关的知识，希望对你有一定的参考价值。
<script type="text/javascript" src="./whenReady.js"></script> <body> <script type="text/javascript"> whenReady(function(){ var clock = document.getElementById(‘clock‘); //时钟元素 var icon = new Image(); //用于拖动的图片 icon.src = "37178802_25568731.jpg"; //图片url //每分钟显示一次时间 function displayTime(){ var now = new Date(); //获取当前时间 var hrs = now.getHours(),mins = now.getMinutes(); if(mins < 10) mins = "0"+mins; clock.innerhtml = hrs + ":" + mins; //显示当前时间 setTimeout(displayTime,60000); //一分钟后将再次运行 } displayTime(); //使时钟能够拖动 //我们也能通过HTML属性实现这个目的：<span draggable="true">.... clock.draggable="true"; //设置拖动时间处理程序 clock.ondragstart = function(event){ var event = event || window.event; //用于IE兼容性 //dataTransfer属性是拖放API的关键 var dt = event.dataTransfer; //告诉浏览器正在拖动的是什么 //把Date（）构造函数用做一个返回时间戳字符串的函数 dt.setData("Text",Date()+"\n"); //在支持的浏览器中，告诉它拖动图片表现时间戳 //没有这行代码，浏览器也可以使用时钟文本图像作为拖动的值 if(dt.setDragImage) dt.setDragImage(icon,0,0); } }); /** *第二个拖动示例: 作为拖动目标和拖放源的列表 * * DnD API 相当复杂，且浏览器也不完全兼容 * 这个例子基本正确，但每个浏览器会有一点不同，每个似乎都有自身独有的bug * 这些代码不会尝试浏览器特有的解决方案 */ whenReady(function(){ //当文档准备就绪时运行这个函数 //查找所有的<ul class=‘dnd‘>元素，并对其调用dnd（）函数 var lists = document.getElementsByTagName(‘ul‘); var regexp = /\bdnd\b/; for(var i = 0 ; i < lists ; i++ ) if(regexp.test(lists[i].className)) dnd(lists[i]); //为列表元素添加拖放事件处理程序 function dnd(list){ var original_class = list.className; //保存原始CSS类 var entered = 0; //跟踪进入和离开 //当拖放对象首次进入列表时调用这个处理程序 //他会检查拖放对象包含的数据格式他是否能处理 //如果能，他返回false来表示有兴趣放置 //在这种情况下，他会高亮拖放目标，让用户知道该兴趣 list.ondragenter = function(e){ e = e || window.event; //标准或IE事件 var from = e.relaterTarget; //draenter和dragleave事件冒泡 //它使得在像<ul>元素由<li>子元素的情况下 //何时高亮显示或取消高亮显示元素变得棘手 //在定义relatedTarget的浏览器中，我们能跟踪它 //否则，我们需要通过冲击进入和离开的次数 //如果从列表外面进入或第一次进入 //那么需要做一些处理 entered++; if((from && !isChild(from,list)) || entered ==1){ //所有的DnD信息都在dataTransfer对象上 var dt = e.dataTransfer; //dt.types对象列出可用的拖放数据的类型或格式 //HTML 5 定义这个对象有contains（）方法 //在一些浏览器中，它是一个有indexOf（）方法的数组 //在IE8以及之前版本中，他根本不存在 var types = dt.types; //可用数据格式是什么 //如果没有任何类型的数据或可用数据是纯文本格式 //那么高亮显示列表让用户知道我们正在监听拖放 //同时返回false让浏览器知晓 if( !types || (types.contains && types.contains("text/plain"))|| (types.indexOf && types.indexOf("text/plain")!=-1)){ list.className =original_class + " droppable"; return false; } //如果我们无法识别数据类型，我们不希望拖放 return ; //没有取消 } return false; //如果不是第一次进入，我们继续保持兴趣 }; //当鼠标指针悬停在列表上是，会调用这个处理程序 //我们必须定义这个处理程序并返回false，否则这个拖放操作将取消 list.ondragenter = function(e){return false;}; //当拖放对象移出列表或从其子元素中移除时，会调用这个处理程序 //如果我们真正离开这个列表（不是仅仅从一个列表项到另一个） //那么取消高亮显示它 list.ondragleave = function(e){ e = e || window.event; var to = e.relatedTarget; //如果我们要到列表以外的元素或打破离开和进入次数的平衡 //那么取消高亮显示列表 entered--; if((to && !isChild(to,list)) || entered <= 0){ list.className = original_class; entered = 0; } return false; }; //当实际放置时，会调用这个程序 //我们会接收放下的文本并将其放到一个新的<li>元素中 list.ondrop = function(e){ e = e || window.event; //获得事件 //获得放置的纯文本数据 //“Text”是“text/plain”的昵称 //IE不支持“text/plain”，所以在这个使用“Text” var dt = e.dataTransfer; //dataTransfer对象 var text = dt.getData("Text"); //获取放置的纯文本数据 //如果得到一些文本，把它放入列表尾部的新项中 if(text){ var item = document.createElement("li"); //创建新<li> item.draggable = true; //使他可以移动 item.appendChild(document.createTextNode(text)); //添加文本 list.appendChild(item); //把它添加列表中 //恢复列表的原始样式且重置进入次数 list.className = original_class; entered= 0; return false; } }; //使原始所有列表项都可拖动 var items = list.getElementsByTagName(‘li‘); for(var i = 0 ; i<items.length; i++) item[i].draggable = true; //为拖动列表项注册事件处理程序 //注意我们把处理程序放在列表上 //让事件从列表向上冒泡 //当在列表中开始拖动对象，会调用这个处理程序 list.ondragstart = function(e){ var e = e || window.event; var target = e.target || e.srcElement; //如果他不是从<li>向上冒泡，那么忽略它 if(target.tagName !=="LI") return false; //获得最重要的dataTransfer对象 var dt = e.dataTransfer; //设置妥当的数据和数据类型 dt.setData("Text",target.innerText || target.textContent); //设置允许复制和移动这些数据 dt.effectAllowed = "copyMove"; }; //当成功放置后，将调用这个处理程序 list.ondragend = function(e){ e = e || window.event; var target = e.target || e.srcElement; //如果这个拖放操作是move，那么要删除列表项 //在IE8中，他将是“none”，除非在之前的ondrop处理程序中显示设置它为move //但为IE强制设置“move”会阻止其他浏览器给用户选择复制还是移动的机会 if(e.dataTransfer.dropEffect ==="move") target.parentNode.removeChild(target); //这是在ondragenter和ondragleave使用的工具函数 //如果a是b的字元素则返回true function isChild(a,b){ for(;a;a=parentNode) if(a === b) return true; return false; } } } }); </script> <style type="text/css"> #clock{ font:bold 24pt sans; background: #ddf; padding:10px; } </style> <h1>从时钟中脱出时间戳</h1> <span id="clock"></span> <textarea cols="60" rows="20"></textarea> <h1>这是实例二：作为拖动目标和拖放源的列表</h1> <ul class=‘dnd‘> <li>aaaaaaaa</li> <li>bbbbbbbb</li> <li>cccccccc</li> <li>dddddddd</li> <li>eeeeeeee</li> <li>ffffffff</li> <li>gggggggg</li> <li>hhhhhhhh</li> <li>iiiiiiii</li> <li>jjjjjjjj</li> <li>kkkkkkkk</li> </ul> <ul> <li>11111111</li> <li>22222222</li> <li>33333333</li> <li>44444444</li> <li>55555555</li> <li>66666666</li> <li>77777777</li> <li>88888888</li> <li>99999999</li> <li>112122321</li> <li>341433434</li> </ul> </body>
以上是关于JavaScript一个拖动元素的实例的主要内容，如果未能解决你的问题，请参考以下文章