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 相关文章推荐
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
js 为label标签和div标签赋值的方法
Aug 08 Javascript
JQuery触发事件例如click
Sep 11 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
elementUI table表格动态合并的示例代码
May 15 Javascript
Windows上node.js的多版本管理工具用法实例分析
Nov 06 Javascript
微信小程序实现图片压缩
Dec 03 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使用curl存储cookie的示例
2014/03/31 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
Python的randrange()方法使用教程
2015/05/15 Python
python使用super()出现错误解决办法
2017/08/14 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
Python何时应该使用Lambda函数
2019/07/02 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
python获取Pandas列名的几种方法
2019/08/07 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
小班重阳节活动方案
2014/02/08 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
合作经营协议书范本
2014/09/16 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
蔬果开业典礼发言稿应该怎么写?
2019/09/03 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python