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 相关文章推荐
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
jquery中ajax学习笔记3
Oct 16 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
vue模仿网易云音乐的单页面应用
Apr 24 Javascript
vue实现分页栏效果
Jun 28 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
浅谈Vue为什么不能检测数组变动
Oct 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
劣质的PHP代码简化
2010/02/08 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
php跨服务器访问方法小结
2015/05/12 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
js文字滚动停顿效果代码
2008/06/28 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
Python中的作用域规则详解
2015/01/30 Python
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
python之Socket网络编程详解
2016/09/29 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
Python实现的栈(Stack)
2018/01/26 Python
python字符串的方法与操作大全
2018/01/30 Python
python列表list保留顺序去重的实例
2018/12/14 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
星空联盟C# .net笔试题
2014/12/05 面试题
玩具公司的创业计划书
2013/12/31 职场文书
学习方法演讲稿
2014/05/10 职场文书
消防宣传口号
2014/06/16 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
党员理论学习心得体会
2016/01/21 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
Golang生成Excel文档的方法步骤
2021/06/09 Golang