JS实现的简易拖放效果示例
本文实例讲述了JS实现的简易拖放效果。分享给大家供大家参考，具体如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>简易拖放效果</title>
</head>
<body>
<script type="text/JavaScript">
<!--
var isIE = (document.all) ? true : false;// 是否ie
var $ = function (id) {
//返回id对象
return "string" == typeof id ? document.getElementById(id) : id;
};
var Class = {
// 带构造方法的类
create: function() {
return function() { this.initialize.apply(this, arguments); } //用apply应用下面的initialize初始化属性
}
}
var Extend = function(destination, source) {
//继承
for (var property in source) {
destination[property] = source[property];
}
}
var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
}
}
/**
用object对象调用fun参数是event||window event
**/
var BindAsEventListener = function(object, fun) {
return function(event) {
return fun.call(object, (event || window.event));
}
}
/**
添加帧听器事件
@oTarget 目标对象
@sEventType 事件类型
@fnHandler 目标触发事件对象
**/
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);//firefox
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);//ie
} else {
oTarget["on" + sEventType] = fnHandler;//other
}
};
/**
清除添加的帧听器事件
@oTarget 目标对象
@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 SimpleDrag = Class.create();
SimpleDrag.prototype = {
//拖放对象,触发对象,初始化
initialize: function(drag) {
this.Drag = $(drag);
this._x = this._y = 0;
this._fM = BindAsEventListener(this, this.Move);//_fM方法就是应用MOVE方法参数是event||window.event
this._fS = Bind(this, this.Stop);//_fS类方法就是Stop方法
this.Drag.style.position = "absolute";
this.Drag.style.cursor = "move";
addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start));
},
//准备拖动
Start: function(oEvent) {
this._x = oEvent.clientX - this.Drag.offsetLeft;
this._y = oEvent.clientY - this.Drag.offsetTop;
addEventHandler(document, "mousemove", this._fM);
addEventHandler(document, "mouseup", this._fS);
},
//拖动
Move: function(oEvent) {
this.Drag.style.left = oEvent.clientX - this._x + "px";
this.Drag.style.top = oEvent.clientY - this._y + "px";
},
//停止拖动
Stop: function() {
removeEventHandler(document, "mousemove", this._fM);
removeEventHandler(document, "mouseup", this._fS);
}
};
// -->
</script>
<div id="idDrag" style="border:5px solid #0000FF; background:#C4E3FD; width:50px; height:50px;"></div>
<script type="text/javascript">
<!--
new SimpleDrag("idDrag");
// -->
</script>
</body>
</html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
JavaScript实现的多种鼠标拖放效果
本文实例讲述了JavaScript实现的多种鼠标拖放效果.分享给大家供大家参考,具体如下: 这是一款JavaScript鼠标拖放效果代码,通过本示例了解触发对象,设置范围限制,指定容器大小水平及垂直锁定,还包括获取和释放焦点等. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mouse-move-fix-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
-
Javascript拖拽&拖放系列文章3之细说事件对象第1/4页
在阅读本文前,可以先阅读<Javascript拖拽&拖放系列文章2之offsetLeft.offsetTop.offsetWidth.offsetHeight属性>这篇文章,以理清上下文关系.好了,让我们开始进入正题. 模型相同的属性/方法 1 Button属性 Integer类型,可读可写.对于特定的鼠标事件,表示按下的鼠标按钮,它可以在拖拽的时候,判断是否是鼠标左键引发mousedown事件.它的所有取值及其意义(参考自<Javascript高级程序设计>)好了,让我们
-
浅谈js原生拖放
可拖动 网页中的图像.链接和文本是浏览器默认可以被拖动的,HTML5 为所有的HTML元素都提供了一个draggable属性,当这个属性的值为true的时候,元素被视为可以拖动. 拖动图像或者链接时,将鼠标放在图像或者链接上,按住鼠标不放就可以拖动它.拖动文本时,要先选中文本,然后可以像拖动图像一样拖动选中的文本. 被拖动的元素事件 拖动图片时依次触发:drapstart,drag,dragend事件.这三个事件的目标都是被拖动的元素. 按下鼠标键并开始移动鼠标时,会在被拖放元素上触发drags
-
javascript 拖放效果实现代码
有许多理由让你在页面中加入拖放的功能,其中最简单的理由是重新组织数据.举个例子,你可能希望用户能够重组一系列的页面元素,通过放置一个input或 select组件在各个元素的旁边来代表它们的顺序是一种解决方案,使该组元素可以被拖放是一种替代方案.或者也许你想在网站上拥有一个可以被用户移动的导航窗口.这些都是使用拖放功能的简单理由,因为你能够实现! 在你的网页上实现拖放的效果并不是很复杂.首先,我们知道鼠标的位置,然后我们需要了解用户什么时候点击一个元素,以至于我们知道要准备开始拖动它,最后我们要
-
JavaScript 图片放大镜（可拖放、缩放效果）第1/4页
前些日子突然想做一个透镜效果,就突然想到了这个效果,于是找出当年"珍藏"的代码决定一尝所愿. 前言:这个程序主要分三部分:层的拖放.层的缩放.图片切割(包括预览). 其中层的拖放是很常见的效果,层的缩放有点难度,图片切割看着炫其实原理也很简单. 不过在实现的过程中也学习到很多以前不知道的东西,下面都会说明,希望大家从中也能学到东西. 原理: [拖放程序] 基本原理很简单,不知道的看代码就明白,其中参考了越兔和BlueDestiny的相关文章. 下面说一下比较有用的地方: [范围限制]
-
谈谈对JavaScript原生拖放的深入理解
前面的话 拖放(drag-and-drop,DnD)其实是两个动作--拖和放.所以,它涉及到两个元素.一个是被拖的元素,称为拖放源:另一个是要放的目标,称为拖放目标.本文将通过拆分这两个概念来详细介绍原生拖放 拖放源 什么样的元素才是拖放源呢? HTML5为所有HTML元素规定了一个draggable属性,表示元素是否可以拖动 图像和链接的draggable属性自动被设置成了true,而其他元素这个属性的默认值都是false [注意]必须设置draggable='true'才能生效,只设置dra
-
JavaScript实现网页对象拖放功能的方法
本文实例讲述了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=
-
Vue.js实现拖放效果的实例
页面效果如下所示: 代码请看这里,当当当当: html: <template> <div class='drag-content'> <div class='project-content'> <div class='select-item' draggable='true' @dragstart='drag($event)' v-for='pjdt in projectdatas'>{{pjdt.name}}</div> </div>
-
JavaScript 拖放效果代码
这个程序的原型是在做图片切割效果的时候做出来的,那时参考了好几个同类的效果,跟muxrwc和BlueDestiny学习了不少东西. 虽然每次整理都觉得很好了,不过每隔一段时间又会发现得某个地方可以改善,某个地方有错误,某些需求需要实现,就像自己学习的知识那样. 这里考虑到有的人可能只需要简单的拖放,所以有一个简化版的拖放SimpleDrag,方便学习. 效果预览 ps:在maxthon下如果开启广告过滤的话很可能会被过滤掉(不知有什么方法可以避免). 程序说明 [程序原理] 这里以SimpleD
-
javascript实现拖放效果
本文实例为大家分享的是一个拖放的效果,参考的代码,重构以下,加以理解学习. 首先来看效果: 拖动div 拖放状态:未开始 [程序说明] 拖动原理:其实就是在拖动块上监听mousedown事件,鼠标点击时,通过事件对象获取对应的坐标参数.然后鼠标移动时再监听document上的mousemove事件,获取鼠标的clientX 和clientY坐标然后设置拖动块的left 和 top. 首先是监听mousedown事件 复制代码 代码如下: EventUtil.addEventHandler(thi