基本拖拽配置

new Dragdrop({
target 拖拽元素 HTMLElemnt 必选
bridge 指定鼠标按下哪个元素时开始拖拽,实现模态对话框时用到 
dragable 是否可拖拽 (true)默认
dragX true/false false水平方向不可拖拽 (true)默认
dragY true/false false垂直方向不可拖拽 (true)默认
area [minX,maxX,minY,maxY] 指定拖拽范围 默认任意拖动
callback 拖拽过程中的回调函数
});

/**
* JavaScript Dragdrop Library v0.6
* Copyright (c) 2010 snandy
* Blog: http://snandy.javaeye.com/
* QQ群: 34580561
* Date: 2010-09-06
*
*
* 基本拖拽
* 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){
this.target = opt.target;
this.bridge = opt.bridge;
this.dragable = opt.dragable != false;
this.dragX = opt.dragX != false;
this.dragY = opt.dragY != false;
this.area = opt.area;
this.callback = opt.callback;
}
function Dragdrop(opt){
if(!opt){return;}
conf = new Config(opt);
defaultConf = new Config(opt);
conf.bridge ?
E.on(conf.bridge,'mousedown',mousedown) :
E.on(conf.target,'mousedown',mousedown);
}
Dragdrop.prototype = {
dragX : function(){
conf.dragX = true;
conf.dragY = false;
},
dragY : function(b){
conf.dragY = true;
conf.dragX = false;
},
dragAll : function(){
conf.dragX = true;
conf.dragY = true;
},
setArea : function(a){
conf.area = a;
},
setBridge : function(b){
conf.bridge = b;
},
setDragable : function(b){
conf.dragable = b;
},
reStore : function(){
conf = new Config(defaultConf);
conf.target.style.top = '0px';
conf.target.style.left = '0px';
},
getDragX : function(){
return conf.dragX;
},
getDragY : function(){
return conf.dragY;
}
}
function mousedown(e){
e = E.evt(e);
var el = conf.target;
el.style.position = 'absolute';
el.style.cursor = 'move';
if(el.setCapture){ //IE
E.on(el, "losecapture", mouseup);
el.setCapture();
e.cancelBubble = true;
}else if(window.captureEvents){ //标准DOM
e.stopPropagation();
E.on(window, "blur", mouseup);
e.preventDefault();
}
diffX = e.clientX - el.offsetLeft;
diffY = e.clientY - el.offsetTop;
E.on(doc,'mousemove',mousemove);
E.on(doc,'mouseup',mouseup);
}
function mousemove(e){
var el = conf.target, e = E.evt(e), moveX = e.clientX - diffX, moveY = e.clientY - diffY;
var minX, maxX, minY, maxY;
if(conf.area){
minX = conf.area[0];
maxX = conf.area[1];
minY = conf.area[2];
maxY = conf.area[3];
moveX < minX && (moveX = minX); // left 最小值
moveX > maxX && (moveX = maxX); // left 最大值
moveY < minY && (moveY = minY); // top 最小值
moveY > maxY && (moveY = maxY); // top 最大值
}
if(conf.dragable){
conf.dragX && (el.style.left = moveX + 'px');
conf.dragY && (el.style.top = moveY + 'px');
if(conf.callback){
var obj = {moveX:moveX,moveY:moveY};
conf.callback.call(conf,obj);
}
}
}
function mouseup(e){
var el = conf.target;
el.style.cursor = 'default';
E.un(doc,'mousemove',mousemove);
E.un(doc,'mouseup',mouseup);
if(el.releaseCapture){ //IE
E.un(el, "losecapture", mouseup);
el.releaseCapture();
}
if(window.releaseEvents){ //标准DOM
E.un(window, "blur", mouseup);
}
}
return new Dragdrop(opt); } }(this);

  HTML代码

<!DOCTYPE HTML>
<html>
<head>
<title>dragdrop_0.5.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body {margin:0;padding:0;}
</style>
<script type="text/javascript" src="dragdrop_0.6.js"></script>
<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:600px;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:600px;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:600px;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>
</body>
</html>

  

Javascript自由拖拽类的更多相关文章

  1. JavaScript实现拖拽元素对齐到网格(每次移动固定距离)

    这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...

  2. javascript鼠标拖拽的那些事情

    <html> <head> <title>javascript鼠标拖拽的那些事情</title> <meta http-equiv="C ...

  3. jquery插件-自由拖拽

    最近工作不是很忙,学习之余想整理一些代码出来,首先想到的就是是js拖拽. 两年前去某公司面试的时候,曾经被问过这个问题,如何在页面上拖放元素,尽管现在看起来很简单,但当时的我半点思路都没有,面试想当然 ...

  4. JavaScript动画-拖拽改变元素大小

    ▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...

  5. Javascript之拖拽库

    在手机上运行触屏拖动时,我发现页面并没有反应,服务器端执行javascript在手机端与电脑端不能“相同式”实现(电脑端运行正常,而手机端不一样),这是为甚么呢? 首先,我们都知道javascript ...

  6. javascript完美拖拽的实现

    直接上代码: HTML代码: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta chars ...

  7. day50—JavaScript鼠标拖拽事件

    转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...

  8. JavaScript鼠标拖拽特效及相关问题总结

    #div1{width:200px;height:200px;background:red;position:absolute;} #div2{width:200px;height:200px;bac ...

  9. html --- javascript --- div --- 拖拽方块

    当鼠标拖拽的很快时,光标会走出方块,所以把事件注册在了方块的父节点上, 如有疑问请参照:http://blog.csdn.net/a9529lty/article/details/2708171 使用 ...

随机推荐

  1. Java学习笔记50:JSONObject与JSONArray的使用

    Java不像PHP解析和生产JSON总是一个比较痛苦的过程.但是使用JSONObject和JSONArray会让整个过程相对舒服一些. 需要依赖的包:commons-lang.jar commons- ...

  2. vue+webpack项目实战

    概述 -- 项目中会用到的插件 vue-router vue-resource 打包工具 webpack 依赖环境 node.js start 安装vue开发的模板 # 全局安装 vue-cli $ ...

  3. Vue.js快速入门

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

  4. 开始我的.NET的学习旅程

    今天开始了我的.NET学习之旅,终于弄懂了.NET与C#的关系,一开始还以为它们就是一个东西,原来不是那样的,C#只是基于.NET平台环境下运行的一种语言,.NET不止可以运行C#语言,更可以运行其他 ...

  5. C#中对输出格式的初始化

    一.在输出的时候,\t和8个空格是不一样的,\t是跳转到下一个水平制表符,如果你在第一个水平制表符中写有数据123,那么跳转后跳转到9的位置上,中间只有5个空格,但是如果用8个空格来做分割的话,就会有 ...

  6. WIFI网络访问(一)

    一,WIFI 网卡有哪些状态? WIFI 总共有以下五个状态,实际就是一些整形常量: 1.   WIFI_STATE_DISABLED : WIFI 不能使用,其值是: 1 . 2.   WIFI_S ...

  7. mvc 客户端验证

    @model MvcApplication1.Models.ViewClass @{ ViewBag.Title = "View2"; } @******引用这两个js实现客户端的 ...

  8. 初始seajs

    SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制 SeaJS本身遵循KISS(Keep It Simple, Stupid ...

  9. printf--动态指定输出格式长度

    char a1[] = {'A', 'B', 'C'}; char a2[] = "world"; printf(, a1, , a2); printf("[%.*s][ ...

  10. 引用 - PHP手册笔记

    引用是什么 PHP中的引用意味着,用不同的变量名访问同一变量内容,类似于Unix的文件名和文件本身(变量名是目录条目,变量内容是文件本身,即用不同的目录条目访问同一文件),可以看做Unix文件系统中的 ...