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一个拖动元素的实例的更多相关文章
- 每天一个JavaScript实例-从一个div元素删除一个段落
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- JavaScript 实现鼠标拖动元素
一.前言 最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点,用于固定定位,然后在复制HTML,粘贴在页面的开发代码中,就是这么一个功能,实现了很多遍,都没有做好,不得已采用了jQuery.f ...
- JavaScript事件模拟元素拖动
一.前言: 最近要实现一个元素拖放效果,鼠标拖动元素并且定位元素,首先想到的是HTML5中的拖放,在HTML5中,有一个draggable属性,且有dragstart, dragover, drop等 ...
- 原生JavaScript 获取下一个/上一个同胞元素
看JavaScript遇到的问题,研究了下 获取上一个或者下一个同胞元素,使用很多人会立马想到JQuery prev() 和 next() 的确非常方便.那么原生的JavaScript该怎么获取 上 ...
- JavaScript一个鼠标滚动事件的实例
<script type="text/javascript" src="./whenReady.js"></script> <!- ...
- JavaScript封装函数：获取下一个/上一个兄弟元素节点
要求: 获得下一个/上一个兄弟元素节点,不包括文本节点等 解决IE兼容性问题 代码实现: 获得下一个兄弟元素节点: function getNextElement(element) { var el ...
- JavaScript HTML DOM 元素(节点)
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...
- JavaScript强化教程——jQuery AJAX 实例
什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...
- 用javascript实现html元素的增删查改[xyytit]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- SDN学习之实现环路通信
在对OpenFlow协议有了一定了解以后,开始尝试如何通过Ryu控制器实现网络中的通信.根据协议,我们知道,当数据信息首次传输到交换机时,由于交换机不存在该数据信息所对应的流表,因此,会触发Packe ...
- [python] 1、python鼠标点击、移动事件应用——写一个自动下载百度音乐的程序
1.问题描述: 最近百度总爱做一些破坏用户信任度的事——文库金币变券.网盘限速,吓得我赶紧想办法把存在百度云音乐中的歌曲下载到本地. http://yinyueyun.baidu.com/ 可问题是云 ...
- 基于cookie使用过滤器实现客户每次访问自登陆一次
原创声明:本文为本人原创作品,绝非他处摘取,转载请联系博主 相信大家在各大网站都会遇到,登录时,在登录框出现下次免登陆/一个月免登陆的类似选项,本次博文就是讲解如何实现,在这记录一下,也算是做个备忘录 ...
- 图表（Chart & Graph）你真的用对了吗？
欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~ 工作中,我们常常会遇到各式各样的数据,例如网站性能,销售业绩,客户服务 .营销活动等数据.对于这些数据,有哪些行之有效的方法来形 ...
- CentOS上安装redis记录
下载稳定版 curl -O http://download.redis.io/releases/redis-stable.tar.gz tar -zxvf redis-stable.tar.gz cd ...
- TeamViewer——可以实现在手机上随时远程控制你的电脑
小编今天给大家推荐一款强大的远程控制软件——TeamViewer,可以让你的手机连接你自己的电脑,不管你身处何处,只要电脑和手机都能联网,那么你就可以在手机上控制你的电脑了.以下介绍下如何安装和使用方 ...
- SimpleDateFormat日期格式（浅面）
java中使用SimpleDateFormat类的构造函数SimpleDateFormat(String str)构造格式化日期的格式, 通过format(Date date)方法将指定的日期对象格式 ...
- 13.ThreadPoolExecutor线程池之submit方法
jdk1.7.0_79 在上一篇<ThreadPoolExecutor线程池原理及其execute方法>中提到了线程池ThreadPoolExecutor的原理以及它的execute方法 ...
- cookie 与 session
cookie简介 Cookie是存储在客户端浏览器中的数据,我们通过Cookie来跟踪与存储用户数据.一般情况下,Cookie通过HTTP headers从服务端返回到客户端.多数web程序都支持Co ...
- Scrapyd部署爬虫
Scrapyd部署爬虫 准备工作 安装scrapyd: pip install scrapyd 安装scrapyd-client : pip install scrapyd-client 安装curl ...