<!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, 'div')[0];
/*获取outWarpId信息*/
this.warpWidth = outWarp.offsetWidth - 2; // 对象宽度
this.warpHeight = outWarp.offsetHeight - 2; // 对象高度
this.warpLeft = outWarp.offsetLeft; //对象靠LEFT距离
this.warpTop = outWarp.offsetTop; //对象靠TOP距离
/*定义拖动的对象*/
this.draging = null;
this.bind();
};
DragBox.prototype = {
moveBox:function (event) {
event = event || window.event;
var target = event.target || event.srcElement;
// 记录滚动条位置
this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
this.scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
//记录光标的位置
var mousex = event.clientX; // 光标LEFT
var mousey = event.clientY; //光标TOP
//console.log('mousex:' + mousex);
//console.log('mousey:' + mousey);
// 光标相对outwarp层的坐标
var posx = mousex + this.scrollLeft - this.warpLeft;
var posy = mousey + this.scrollTop - this.warpTop;
// 多次用到this.controlBox 赋值一个短变量名
var my = this.controlBox;
// 多次用到this.controlBox.style，赋值一个短变量名
var myStyle = my.style;
// 最小尺寸
var minWidth = 200,minHeight = 200;
switch(event.type){
case 'mousedown':
/*记录相关初始信息*/
if(target.parentNode.className.indexOf('controlBar')!=-1){
this.draging = this.controlBox; //赋值拖动对象
}
if(target.className.indexOf('rb')!= -1){
this.draging = this.resizeRb; // 赋值为右下角拖动
}
if(target.className.indexOf('tr')!= -1){
this.draging = this.resizeTr; // 赋值为右上角改变大小
}
if(target.className.indexOf('lt')!= -1){
this.draging = this.resizeLt; // 赋值为左上角改变大小
}
if(target.className.indexOf('bl') != -1){
this.draging = this.resizeBl;
}
//alert('this.scrollTop:'+this.scrollTop);
//点击时记录拖动层的初始信息
this.controlBoxWidth = my.offsetWidth; //拖动层的宽度
this.controlBoxHeight = my.offsetHeight; //拖动层的宽度
this.controlBoxLeft = my.offsetLeft; //拖动层的LEFT坐标
this.controlBoxTop = my.offsetTop; //拖动层的TOP坐标
// 记录鼠标按下时鼠标相对与拖动层的距离
this.mx = posx - this.controlBoxLeft;
this.my = posy - this.controlBoxTop;
// 记录左下角的坐标，因为按住右上拖动的时候左下角不动
this.lb_x = my.offsetWidth + my.offsetLeft;
this.lb_y = my.offsetHeight + my.offsetTop;
console.log('my.offsetHeight:'+my.offsetHeight+'my.offsetTop:'+my.offsetTop);
// 记录右下角坐标，按住左上角拖动的时候右下角不动
this.rb_x = my.offsetLeft + my.offsetWidth;
this.rb_y = my.offsetTop + my.offsetHeight;
// 记录右上角坐标，当按住左下角的时候右上角不动
this.lt_x = my.offsetLeft + my.offsetWidth;
this.lt_y = my.offsetTop;
break;
case 'mousemove':
if (this.draging == this.controlBox){
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //取消页面上由于鼠标按下拖动造成的选中文字和图片的选择状态
//拖动层的位置
var left = posx - this.mx;
var top = posy - this.my;
left < 0 && (left = 0);
top < 0 && (top = 0);
left > (this.warpWidth - this.controlBoxWidth) && (left = this.warpWidth - this.controlBoxWidth);
top > (this.warpHeight - this.controlBoxHeight) && (top = this.warpHeight - this.controlBoxHeight);
//改变位置
myStyle.left = left + 'px';
myStyle.top = top + 'px';
//右下角拖动
} else if (this.draging == this.resizeRb) {
// 需要改变的宽度
var changeWidth = posx - this.controlBoxWidth - this.controlBoxLeft,
changeHeight = posy - this.controlBoxHeight - this.controlBoxTop,
// 计算总宽度
allWidth = this.controlBoxWidth + changeWidth + this.controlBoxLeft ,
allHeight = this.controlBoxHeight + changeHeight + this.controlBoxTop;
//改变宽度
myStyle.width = (this.controlBoxWidth + changeWidth) + 'px';
myStyle.height = (this.controlBoxHeight + changeHeight) + 'px';
// 限制最大宽度
if (allWidth > this.warpWidth) {
myStyle.width = ( this.warpWidth - this.controlBoxLeft) + 'px';
}
if (allHeight > this.warpHeight) {
myStyle.height = (this.warpHeight - this.controlBoxTop) + 'px';
}
// 限制最小宽度
if ( parseInt(myStyle.width) < minWidth)myStyle.width = minWidth + 'px';
if (parseInt(myStyle.height) < minHeight) myStyle.height = minHeight + 'px';
// 右上角
} else if (this.draging == this.resizeTr) {
// 需要改变的宽度，该变高度即改变TOP的坐标
changeWidth = posx - this.controlBoxWidth - this.controlBoxLeft;
// 计算总宽度
allWidth = this.controlBoxWidth + changeWidth + this.controlBoxLeft;
// 改变宽度
myStyle.width = (this.controlBoxWidth + changeWidth) + 'px';
if (allWidth > this.warpWidth) myStyle.width = ( this.warpWidth - this.controlBoxLeft) + 'px';
if ( parseInt(myStyle.width) < minWidth) myStyle.width = minWidth + 'px';
// 改变高度
my.style.top = posy + 'px';
my.style.height = (this.controlBoxHeight + (this.controlBoxTop - posy)) +'px';
if(parseInt(my.style.height)< minHeight){
my.style.height = minHeight +'px';
my.style.top = (this.lb_y - minHeight) + 'px';
}
if(parseInt(my.style.height)>this.lb_y){
my.style.height = this.lb_y + 'px';
my.style.top = 0;
}
// 左上角
}else if (this.draging == this.resizeLt) {
changeWidth = this.controlBoxLeft - posx;
changeHeight = this.controlBoxTop - posy;
my.style.left = posx + 'px';
my.style.width = (this.controlBoxWidth + changeWidth) + 'px';
my.style.top = posy + 'px';
my.style.height = (this.controlBoxHeight + changeHeight) + 'px';
// 限制宽高度最大值
if(parseInt(my.style.width) > this.controlBoxLeft + this.controlBoxWidth){
my.style.width = (this.controlBoxLeft + this.controlBoxWidth) + 'px';
my.style.left = 0;
}else if(parseInt(my.style.width)< minWidth){
my.style.left = (this.rb_x - minWidth) + 'px';
my.style.width = minWidth + 'px';
}
if(parseInt(my.style.height) > this.controlBoxHeight + this.controlBoxTop){
my.style.height = (this.controlBoxHeight + this.controlBoxTop) + 'px';
if(parseInt(my.style.top)<0) my.style.top = 0;
}else if(parseInt(my.style.height)< minHeight){
my.style.top = (this.rb_y - minHeight) + 'px';
my.style.height = minHeight + 'px';
}
// 左下角
}else if(this.draging == this.resizeBl){
changeWidth = this.controlBoxLeft - posx;
changeHeight = posy - this.controlBoxHeight - this.controlBoxTop;
my.style.left = posx + 'px';
my.style.width = this.controlBoxWidth + changeWidth + 'px';
my.style.height = this.controlBoxHeight + changeHeight + 'px';
if(parseInt(my.style.width)< minWidth){
my.style.width = minWidth + 'px';
my.style.left = this.lt_x - minWidth + 'px';
}else if(parseInt(my.style.width)> this.lt_x){
my.style.width = this.lt_x + 'px';
my.style.left = 0;
}
if(parseInt(my.style.height)< minHeight){
my.style.height = minHeight + 'px';
}else if(parseInt(my.style.height)> this.warpHeight- this.lt_y){
my.style.height = this.warpHeight- this.lt_y +'px';
}
}
break;
case 'mouseup':
this.draging = null;
break;
}
},
bind:function () {
var that = this;
bindEvent(document, 'mousedown', bindFunction(that,that.moveBox));
bindEvent(document, 'mousemove', bindFunction(that,that.moveBox));
bindEvent(document, 'mouseup', bindFunction(that,that.moveBox));
}
};
var demo = new DragBox({
outWarpId:'outwarp'
});
})()
</script>
</body>
</html>
分享到：
相关推荐
本文将深入讲解如何利用JavaScript实现这样的功能。 首先，我们需要创建HTML结构，用于显示悬浮球。一个简单的悬浮球可以由一个`<div>`元素来表示，我们可以通过CSS设置其样式，使其看起来像一个球体： ```html ...
javaScript实现DIV简单拖拽
### JavaScript 实现圆形进度条拖拽滑动 #### 技术背景 在现代网页开发中，动态元素和交互式设计是提升用户体验的关键因素之一。其中，进度条是一种常见的UI组件，用于显示操作或任务的完成程度。传统的线性进度条...
在本文中，我们将深入探讨如何使用three.js库创建一个简单的拖拽生成场景的示例。three.js是一个基于WebGL的JavaScript库，它使得在浏览器中创建3D图形变得容易。结合OrbitControls.js，我们可以实现对场景中的对象...
在JavaScript中实现拖动功能...总结，JavaScript实现拖动功能的核心在于理解和巧妙运用鼠标事件，以及适时更新元素的位置。通过不断实践和优化，我们可以创建出更加复杂、功能丰富的拖动系统，适应各种复杂的交互需求。
JavaScript 实现简单的拖拽效果是网页交互中常见的一种功能，主要通过监听鼠标事件来实现。在本实例中，我们将分析如何使用 JavaScript 和 CSS 创建一个可拖动的蓝色盒子。 首先，我们需要创建 HTML 结构，这里包含...
JavaScript 实现简单的 Div 拖拽功能是一种常见的交互设计，常用于网页上的可操作元素，如窗口、面板或自定义控件。以下是对这个实例的详细解析： 首先，我们需要一个包含拖拽功能的 Div 元素。在 HTML 中，我们...
在网页开发中，JavaScript...总的来说，使用JavaScript实现网页中的拖拽功能，涉及到事件监听、坐标计算和DOM操作等核心概念。通过实践，开发者可以更好地理解和掌握这些技能，为用户提供更加直观和有趣的交互体验。
在介绍如何使用JavaScript实现简单的拖拽效果之前，我们先来了解几个重要的知识点。首先，拖拽效果通常是指用户在界面上通过鼠标点击并移动元素到新位置的过程。在Web开发中，实现拖拽效果能够增强用户的交互体验。...
JavaScript 实现简单的拖拽效果是前端开发中常见的一种交互功能，它可以增强用户的体验，使得用户可以自由地在页面上移动某个元素。以下是如何使用 JavaScript 实现这一效果的详细步骤： 首先，我们需要设置页面的...
在JavaScript中实现简单的拖拽效果是一项常见的交互设计任务，它能增强用户与网页元素的交互性。本教程将深入探讨如何使用JavaScript实现这样的功能，主要针对`div`元素，但原理同样适用于其他HTML元素。 首先，...
"jquery实现简单图片的拖动"这个主题是关于如何利用jQuery的API来实现图片元素的拖放功能，这是一个常见的交互设计，使得用户可以通过鼠标拖动图片在页面上自由移动。 在jQuery中，实现图片拖动主要涉及到`...
本文将深入探讨如何使用jQuery实现简单的拖拽效果，让你的网页元素能够随心所欲地移动。 首先，拖拽效果的核心在于捕获鼠标事件，包括`mousedown`（鼠标按下）、`mousemove`（鼠标移动）和`mouseup`（鼠标释放）。...
总的来说，JavaScript实现网页元素拖拽排序涉及HTML的`<draggable>`属性、JavaScript的事件监听和DOM操作。通过这些技术，我们可以创建出交互性强、用户体验佳的拖拽排序功能，适用于各种列表、网格等布局的网页元素...
以上就是使用JavaScript实现图片拖拽的基本步骤和关键代码。通过这种方式，我们可以为用户提供更直观、更具互动性的网页体验。在实际项目中，还可以根据需求进行扩展，例如添加图片缩放、旋转等更多功能。
本篇文章将深入探讨如何使用JavaScript实现这样的功能。 首先，我们需要了解HTML5的拖放API。HTML5提供了`dragstart`、`drag`、`dragenter`、`dragleave`、`dragover`和`drop`等事件，它们是实现拖放的核心。我们...
项目开发中需要用到一个拖动交换表格的功能，上网搜到雅虎的一个控件，结果简单的一个拖动交换行，就要引入七八个js library，太麻烦了。就自己综合网上资源写了一个可兼容IE，firefox，Chrome，Safari和Opera等主流...
本文将详细介绍如何使用jQuery和JavaScript技术来实现在网页上的Table表格中，通过拖动表头来任意调整列宽度的功能，这个功能适用于各种列表页面，如数据展示、报表分析等场景。 首先，我们需要引入jQuery库，它是...
"svg.draggy.js" 是一个专门针对SVG元素设计的JavaScript工具库插件，它的主要目标是提供简单易用的方法来实现SVG图形的拖拽功能。这个插件的核心特性包括： 1. **拖拽互动**：svg.draggy.js使得SVG元素具备拖动...
本文将深入探讨如何在Web前端实现拖放功能，通过实例分析不同实现方式的优缺点，帮助开发者选择最适合项目需求的解决方案。 首先，让我们了解拖放的基本原理。拖放功能涉及两个主要事件：`dragstart`、`drag`、`...