首页 > 代码库 > JavaScript一个拖动元素的实例
JavaScript一个拖动元素的实例
<script type="text/javascript" src="http://www.mamicode.com/whenReady.js"></script>
<body>
<script type="text/javascript">
whenReady(function(){
var clock = document.getElementById(‘clock‘); //时钟元素
var icon = new Image(); //用于拖动的图片
icon.src = "http://www.mamicode.com/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一个拖动元素的实例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。