JavaScript-drag
日期：2014-05-16 浏览次数：20374 次
JavaScript--drag
直接上代码吧！
<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload = function(){
var container = document.getElementById('container');
var ele = document.getElementById('d1');
var bodyWidth = container.offsetWidth,
bodyHeight = container.offsetHeight;
var maxX = bodyWidth - ele.offsetWidth - 10;
var maxY = bodyHeight - ele.offsetHeight - 10;
var dd = new Dragdrop({
target : ele,
area : [0,maxX,0,maxY],
callback : function(obj){
if(typeof obj.moveX == 'number' && this.dragX){
document.getElementById('x').innerHTML = 'x:'+obj.moveX;
}
if(typeof obj.moveY == 'number' && this.dragY){
document.getElementById('y').innerHTML = 'y:'+obj.moveY;
}
}
});
document.getElementById('setting').onclick = function(e){
e = e || event;
var target = e.target || e.srcElement;
if(target.value == '1' && target.checked){
dd.dragAll();
}
if(target.value == '2' && target.checked){
dd.dragX();
}
if(target.value == '3' && target.checked){
dd.dragY();
}
if(target.value == '4' && target.checked){
dd.setDragable(false);
}
if(target.value == '5' && target.checked){
dd.setDragable(true);
}
if(target.value == '6' && target.checked){
dd.reStore();
document.getElementById('x').innerHTML = 'x:0';
document.getElementById('y').innerHTML = 'y:0';
}
}
}
</script>
</head>
<body>
<div style="width:520px;height:20px;margin:10px auto;">
拖拽状态：<span id="x">x:0</span>, <span id="y">y:0</span>
</div>
<div id="container" style="position:relative;border:5px solid gray;width:520px;height:300px;margin:0 auto;">
<div id="d1" style="width:100px;height:50px;background:gold;text-align:center;position:absolute;left:0px;top:0px;">
Drag me.
</div>
</div>
<div id="setting" style="width:520px;margin:20px auto;">
<input id="f1" type="radio" value="1" name="flag"/><label for="f1">任意方向</label>
<input id="f2" type="radio" value="2" name="flag"/><label for="f2">水平方向</label>
<input id="f3" type="radio" value="3" name="flag"/><label for="f3">垂直方向</label>
<input id="f4" type="radio" value="4" name="flag"/><label for="f4">停止拖拽</label>
<input id="f5" type="radio" value="5" name="flag"/><label for="f5">开启拖拽</label>
<input id="f6" type="radio" value="6" name="flag"/><label for="f6">恢复初始状态</label>
</div>
<script type="text/javascript">
/**
*
* 基本拖拽
* new Dragdrop({
* target 拖拽元素 HTMLElemnt 必选
* bridge 指定鼠标按下哪个元素时开始拖拽，实现模态对话框时用到
* dragable 是否可拖拽 (true)默认
* dragX true/false false水平方向不可拖拽 (true)默认
* dragY true/false false垂直方向不可拖拽 (true)默认
* area [minX,maxX,minY,maxY] 指定拖拽范围 默认任意拖动
* callback 移动过程中的回调函数
* });
*
* demo
* dragdrop_0.6.html
*/
Dragdrop = function(window){
var doc = window.document;
var E = {
on : function(el, type, fn){
el.addEventListener ?
el.addEventListener(type, fn, false) :
el.attachEvent ?
el.attachEvent("on" + type, fn) :
el['on'+type] = fn;
},
un : function(el,type,fn){
el.removeEventListener ?
el.removeEventListener(type, fn, false) :
el.detachEvent ?
el.detachEvent("on" + type, fn) :
el['on'+type] = null;
},
evt : function(e){
return e || window.event;
}
};
return function(opt){
var conf = null, defaultConf, diffX, diffY;
function Config(opt){
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
