js兑现简单拖拽
日期：2014-05-16 浏览次数：20292 次
js实现简单拖拽
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单拖拽扩展</title>
<style type="text/css">
*{margin:0;padding:0;}
#outwarp{ margin:20px auto; width:600px; height:600px; background:#fff; border:1px solid #333; position: relative; }
.controlBox{ width:200px; height:200px; position: absolute; left:25px; top:50px; background:#ccc; font-size:12px; color:#fff; border: 1px solid #333;}
.controlBar{cursor: move;}
.controlBar h2{ font-size:12px; text-align: center; line-height: 25px; background: blue;}
.innerCon{text-align: left; line-height: 20px;}
.innerCon p{ padding: 10px; color: #000;}
.resize{ position: absolute; height: 10px; width:10px; color: white; z-index: 10; background: red;}
.lt{left:0;right:0; cursor:nw-resize;}
.tr{right:0;top: 0;cursor:ne-resize;}
.rb{right:0;bottom: 0; cursor:nw-resize;}
.bl{left:0;bottom:0;cursor:ne-resize;}
</style>
</head>
<body>
<div id="outwarp">
<div class="controlBox">
<div class="resize lt"></div>
<div class="resize tr"></div>
<div class="resize rb"></div>
<div class="resize bl"></div>
<div class="controlBar">
<h2>按此处拖动</h2>
</div>
<div class="innerCon">
<p>中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间
内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容
中间内容中间内容中间内容中间内容中间内容中间内容</p>
</div>
</div>
</div>
<script type="text/javascript">
(function () {
//定义便捷函数getElementById,getElementsByTagName,getElementsByClassName,bindFunction,bindEvent
function $() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string') {
element = document.getElementById(element);
}
if (!element) {
continue;
}
if (arguments.length == 1) {
return element;
}
elements.push(element);
}
return elements;
}
function $$(tag, parent) {
parent = parent || document;
return $(parent).getElementsByTagName(tag);
}
function $$$(str, parent, tag) {
if (parent) {
parent = $(parent);
} else {
parent = document;
}
tag = tag || '*';
var els = parent.getElementsByTagName(tag),
arr = [];
for (var i = 0, n = els.length; i < n; i++) {
for (var j = 0, k = els[i].className.split(' '), l = k.length; j < l; j++) {
if (k[j] == str) {
arr.push(els[i]);
break;
}
}
}
return arr;
}
function bindFunction(obj, func) {
return function () {
return func.apply(obj, arguments);
};
}
function bindEvent(element, type, func) {
if (element.addEventListener) {
element.addEventListener(type, func, false); //false 表示冒泡
} else if (element.attachEvent) {
element.attachEvent('on' + type, func);
} else {
element['on' + type] = func;
}
}
/*定义拖拽类*/
var DragBox = function (options) {
var outWarpId = this.outWarpId = options.outWarpId;//获取最外围的包裹层ID
var outWarp = $(outWarpId);//获取外围包裹层对象
var controlBox = this.controlBox = $$$('controlBox', outWarp, 'div')[0]; //被拖动的层
this.controlBar = $$$('controlBar', controlBox, 'div')[0];
this.resizeLt = $$$('lt', controlBox, 'div')[0];
this.resizeTr = $$$('tr', controlBox, 'div')[0];
this.resizeRb = $$$('rb', controlBox, 'div')[0];
this.resizeBl = $$$('bl', controlBox,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单拖拽扩展</title>
<style type="text/css">
*{margin:0;padding:0;}
#outwarp{ margin:20px auto; width:600px; height:600px; background:#fff; border:1px solid #333; position: relative; }
.controlBox{ width:200px; height:200px; position: absolute; left:25px; top:50px; background:#ccc; font-size:12px; color:#fff; border: 1px solid #333;}
.controlBar{cursor: move;}
.controlBar h2{ font-size:12px; text-align: center; line-height: 25px; background: blue;}
.innerCon{text-align: left; line-height: 20px;}
.innerCon p{ padding: 10px; color: #000;}
.resize{ position: absolute; height: 10px; width:10px; color: white; z-index: 10; background: red;}
.lt{left:0;right:0; cursor:nw-resize;}
.tr{right:0;top: 0;cursor:ne-resize;}
.rb{right:0;bottom: 0; cursor:nw-resize;}
.bl{left:0;bottom:0;cursor:ne-resize;}
</style>
</head>
<body>
<div id="outwarp">
<div class="controlBox">
<div class="resize lt"></div>
<div class="resize tr"></div>
<div class="resize rb"></div>
<div class="resize bl"></div>
<div class="controlBar">
<h2>按此处拖动</h2>
</div>
<div class="innerCon">
<p>中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间
内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容
中间内容中间内容中间内容中间内容中间内容中间内容</p>
</div>
</div>
</div>
<script type="text/javascript">
(function () {
//定义便捷函数getElementById,getElementsByTagName,getElementsByClassName,bindFunction,bindEvent
function $() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string') {
element = document.getElementById(element);
}
if (!element) {
continue;
}
if (arguments.length == 1) {
return element;
}
elements.push(element);
}
return elements;
}
function $$(tag, parent) {
parent = parent || document;
return $(parent).getElementsByTagName(tag);
}
function $$$(str, parent, tag) {
if (parent) {
parent = $(parent);
} else {
parent = document;
}
tag = tag || '*';
var els = parent.getElementsByTagName(tag),
arr = [];
for (var i = 0, n = els.length; i < n; i++) {
for (var j = 0, k = els[i].className.split(' '), l = k.length; j < l; j++) {
if (k[j] == str) {
arr.push(els[i]);
break;
}
}
}
return arr;
}
function bindFunction(obj, func) {
return function () {
return func.apply(obj, arguments);
};
}
function bindEvent(element, type, func) {
if (element.addEventListener) {
element.addEventListener(type, func, false); //false 表示冒泡
} else if (element.attachEvent) {
element.attachEvent('on' + type, func);
} else {
element['on' + type] = func;
}
}
/*定义拖拽类*/
var DragBox = function (options) {
var outWarpId = this.outWarpId = options.outWarpId;//获取最外围的包裹层ID
var outWarp = $(outWarpId);//获取外围包裹层对象
var controlBox = this.controlBox = $$$('controlBox', outWarp, 'div')[0]; //被拖动的层
this.controlBar = $$$('controlBar', controlBox, 'div')[0];
this.resizeLt = $$$('lt', controlBox, 'div')[0];
this.resizeTr = $$$('tr', controlBox, 'div')[0];
this.resizeRb = $$$('rb', controlBox, 'div')[0];
this.resizeBl = $$$('bl', controlBox,
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
