JavaScript实现网页对象拖放功能的方法


Posted in Javascript onApril 15, 2015

本文实例讲述了JavaScript实现网页对象拖放功能的方法。分享给大家供大家参考。具体如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Drag</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
#myDiv{width:50px; height:50px; background-color:red}
</style>
</head>
<body>
<div id="myDiv"></div>
</body>
<script type="text/javascript">
 var isIE = document.all ? true : false;
 //判断是否是IE浏览器
 function addEventHandler(oTarget, sEventType, fnHandler){
 //添加事件
 if(oTarget.addEventListener){
 oTarget.addEventListener(sEventType, fnHandler, false);
 }else if(oTarget.attachEvent){
 oTarget.attachEvent("on" + sEventType, fnHandler);
 }else{
 oTarget["on" + sEventType] = fnHandler;
 }
 }
 function removeEventHandler(oTarget, sEventType, fnHandler) {
 //移除事件
 if (oTarget.removeEventListener) {
 oTarget.removeEventListener(sEventType, fnHandler, false);
 } else if (oTarget.detachEvent) {
 oTarget.detachEvent("on" + sEventType, fnHandler);
 } else {
 oTarget["on" + sEventType] = null;
 }
 }
 var BindAsEventListener = function(object, fun) {
 //以另一个对象替换当前对象
 return function(event) {
 return fun.call(object, (event || window.event));
 }
 }
 var $ = function(id){
 return document.getElementById(id);
 }
 var Class = {
 create: function() {
 return function() {this.initialize.apply(this, arguments);}
 }
 }
 var drag = Class.create();
 drag.prototype = {
 initialize: function(id){//初始化
 this._drag = $(id);
 this._flag = false;
 addEventHandler(this._drag,'mousedown',BindAsEventListener(this,this.start));
 this._fM = BindAsEventListener(this, this.move);
 this._fS = BindAsEventListener(this, this.stop);
 this._drag.style.position = "absolute";
 },
 start: function(oEvent){//相当于onmousedown事件
 //return this._name;
 this._x = oEvent.clientX - this._drag.offsetLeft;
 this._y = oEvent.clientY - this._drag.offsetTop;
 addEventHandler(document, 'mousemove', this._fM);
 addEventHandler(document, 'mouseup', this._fS);
 if(isIE){
  addEventHandler(this._drag, "losecapture", this._fS);
 //焦点丢失
  this._Handle.setCapture();//设置鼠标捕获
 }else{
  addEventHandler(window, "blur", this._fS);//焦点丢失
  oEvent.preventDefault();//阻止默认动作
 }
 },
 move: function(oEvent){ //相当于onmonusemove事件
 this._drag.style.left = oEvent.clientX - this._x + "px";
 this._drag.style.top = oEvent.clientY - this._y + "px";
 },
 stop: function(){ //相当于onmouseup事件
 removeEventHandler(document, 'mousemove', this._fM);
 removeEventHandler(document, 'mouseup', this._fS);
 if(isIE){
  removeEventHandler(this._drag, "losecapture", this._fS);
  this._Handle.releaseCapture();
 }else{
  removeEventHandler(window, "blur", this._fS);
 }
 }
 }
 var ndrag = new drag("myDiv");
</script>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
初探jquery——表单应用范例
Feb 20 Javascript
Javascript 定时器调用传递参数的方法
Nov 12 Javascript
javascript 随机展示头像实现代码
Dec 06 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
实现只能输入数字的input不用replace方法
Sep 12 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
深入解析ES6中的promise
Nov 08 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 #Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 #Javascript
JavaScript中window.open用法实例详解
Apr 15 #Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 #Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 #Javascript
JavaScript表格常用操作方法汇总
Apr 15 #Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 #Javascript
You might like
法压式咖啡之制作法
2021/03/03 冲泡冲煮
PHP - Html Transfer Code
2006/10/09 PHP
php escape URL编码
2008/12/10 PHP
php中突破基于HTTP_REFERER的防盗链措施(stream_context_create)
2011/03/29 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
jquery ajax post提交数据乱码
2013/11/05 Javascript
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
实例讲解vue源码架构
2019/01/24 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
Python编程之属性和方法实例详解
2015/05/19 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
对Python中内置异常层次结构详解
2018/10/18 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
详解Python是如何实现issubclass的
2019/07/24 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
abstract class和interface有什么区别
2013/08/04 面试题
大学生入党自我鉴定
2013/10/31 职场文书
银行会计业务的个人自我评价
2013/11/02 职场文书
工地资料员岗位职责
2013/12/31 职场文书
行政助理的岗位职责
2014/02/18 职场文书
六五普法规划实施方案
2014/03/21 职场文书
满月酒邀请函
2015/01/30 职场文书
学生犯错保证书
2015/05/09 职场文书
感动中国何玥观后感
2015/06/02 职场文书
爱的教育读书笔记
2015/06/26 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
移除Selenium中window.navigator.webdriver值
2022/06/10 Python