<!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>Jeremy - DragDrop Test !</title>
<meta name="keywords" content="Javascript自由拖拽类" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
(function($)
{
$.extend({
//获取鼠标当前坐标
mouseCoords:function(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
},
//获取样式值
getStyle:function(obj,styleName)
{
return obj.currentStyle ? obj.currentStyle[styleName] : document.defaultView.getComputedStyle(obj,null)[styleName];
// return obj.currentStyle ? obj.currentStyle[styleName] : document.defaultView.getComputedStyle(obj,null).getPropertyValue(styleName);
}
});
// 元素拖拽插件
$.fn.dragDrop = function(options)
{
var opts = $.extend({},$.fn.dragDrop.defaults,options);
return this.each(function(){
//是否正在拖动
var bDraging = false;
//移动的元素
var moveEle = $(this);
//点击哪个元素，以触发移动。
//该元素需要是被移动元素的子元素（比如标题等）
var focuEle = opts.focuEle ? $(opts.focuEle,moveEle) : moveEle ;
if(!focuEle || focuEle.length<=0)
{
alert('focuEle is not found! the element must be a child of '+this.id);
return false;
}
// initDiffX|Y : 初始时，鼠标与被移动元素原点的距离
// moveX|Y : 移动时，被移动元素定位位置 (新鼠标位置与initDiffX|Y的差值)
// 如果定义了移动中的回调函数，该对象将以参数传入回调函数。
var dragParams = {initDiffX:'',initDiffY:'',moveX:'',moveY:''};
//被移动元素，需要设置定位样式，否则拖拽效果将无效。
moveEle.css({'position':'absolute','left':'0','top':'0'});
//点击时，记录鼠标位置
//DOM写法： getElementById('***').onmousedown= function(event);
focuEle.bind('mousedown',function(e){
//标记开始移动
bDraging = true;
//改变鼠标形状
moveEle.css({'cursor':'move'});
//捕获事件。（该用法，还有个好处，就是防止移动太快导致鼠标跑出被移动元素之外）
if(moveEle.get(0).setCapture)
{
moveEle.get(0).setCapture();
}
//（实际上是鼠标当前位置相对于被移动元素原点的距离）
// DOM写法：(ev.clientX + document.body.scrollLeft - document.body.clientLeft) - document.getElementById('***').style.left;
dragParams.initDiffX = $.mouseCoords(e).x - moveEle.position().left;
dragParams.initDiffY = $.mouseCoords(e).y - moveEle.position().top;
});
//移动过程
focuEle.bind('mousemove',function(e){
if(bDraging)
{
//被移动元素的新位置，实际上鼠标当前位置与原位置之差
//实际上，被移动元素的新位置，也可以直接是鼠标位置，这也能体现拖拽，但是元素的位置就不会精确。
dragParams.moveX = $.mouseCoords(e).x - dragParams.initDiffX;
dragParams.moveY = $.mouseCoords(e).y - dragParams.initDiffY;
//是否限定在某个区域中移动.
//fixarea格式: [x轴最小值,x轴最大值,y轴最小值,y轴最大值]
if(opts.fixarea)
{
if(dragParams.moveX<opts.fixarea[0])
{
dragParams.moveX=opts.fixarea[0]
}
if(dragParams.moveX>opts.fixarea[1])
{
dragParams.moveX=opts.fixarea[1]
}
if(dragParams.moveY<opts.fixarea[2])
{
dragParams.moveY=opts.fixarea[2]
}
if(dragParams.moveY>opts.fixarea[3])
{
dragParams.moveY=opts.fixarea[3]
}
}
//移动方向：可以是不限定、垂直、水平。
if(opts.dragDirection=='all')
{
//DOM写法： document.getElementById('***').style.left = '***px';
moveEle.css({'left':dragParams.moveX,'top':dragParams.moveY});
}
else if (opts.dragDirection=='vertical')
{
moveEle.css({'top':dragParams.moveY});
}
else if(opts.dragDirection=='horizontal')
{
moveEle.css({'left':dragParams.moveX});
}
//如果有回调
if(opts.callback)
{
//将dragParams作为参数传递
opts.callback.call(opts.callback,dragParams);
}
}
});
//鼠标弹起时，标记为取消移动
focuEle.bind('mouseup',function(e){
bDraging=false;
moveEle.css({'cursor':'default'});
if(moveEle.get(0).releaseCapture)
{
moveEle.get(0).releaseCapture();
}
});
});
};
//默认配置
$.fn.dragDrop.defaults =
{
focuEle:null, //点击哪个元素开始拖动,可为空。不为空时，需要为被拖动元素的子元素。
callback:null, //拖动时触发的回调。
dragDirection:'all', //拖动方向：['all','vertical','horizontal']
fixarea:null //限制在哪个区域拖动,以数组形式提供[minX,maxX,minY,maxY]
};
})(jQuery);
// test
$(function(){
//限定区域，有回调函数。
$('#dragDiv').dragDrop({fixarea:[0,$('#dragContainer').width()-50,0,$('#dragContainer').height()-50],callback:function(params){
$('#span1').text('X:'+params.moveX+' Y:'+params.moveY);
}});
//默认设置
$('#dragDiv1').dragDrop();
});
</script>
</head>
<body>
<div id="dragContainer" style="position:relative;left:10px;top:10px;border:1px dashed blue;width:500px;height:500px;">
<div id="dragDiv" style="background-color:blue;height:50px;width:50px;">
</div>
<div id="dragDiv1" style="border:1px solid red;height:50px;width:50px;">
</div>
</div>
<span id="span1"></span></body>
</html>
来自：http://www.cnblogs.com/McJeremy/archive/2011/04/14/2016398.html
相关推荐
jQuery自由拖拽排序插件是JavaScript库jQuery的一个扩展，它为网页中的元素提供了方便的拖放排序功能。这种插件通常用于实现用户可以手动调整列表或区块顺序的交互式界面，比如任务管理器、菜单配置或者自定义布局的...
jQuery自由拖拽排序代码插件是一种用于Web应用的交互式功能，它允许用户通过鼠标拖放操作对元素进行自由排序。这种技术常被用于管理列表、项目列表或任何需要动态调整顺序的内容。在这个插件中，我们可以看到核心是...
本篇文章将深入探讨如何使用jQuery和drag.js插件来创建水平、垂直以及自由拖拽的特效，这在网页设计中非常常见，如图片相册、窗口拖放等场景。 首先，jQuery提供了`mousedown`、`mousemove`和`mouseup`事件来实现...
首先，要理解jQuery自由拖拽排序的工作原理，核心在于监听鼠标的mousedown、mousemove和mouseup事件。当用户按下鼠标时，开始拖动元素，mousemove事件负责在拖动过程中更新元素的位置，直到鼠标释放（mouseup事件）...
jQuery自由拖拽排序插件是一种基于JavaScript库jQuery的交互式功能，它允许用户通过鼠标拖放操作对元素进行自由排序，常用于创建可自定义排列顺序的列表或网格布局。这种插件在网页开发中非常实用，特别是在需要动态...
在给定的标题“jquery拖拽排序插件div自由拖动排序代码”中，我们主要讨论的是如何利用jQuery实现一个功能，让用户能够自由地通过拖放操作来对页面上的div元素进行排序。这种功能在许多应用场景中都非常实用，比如...
在本文中，我们将深入探讨如何使用jQuery实现一个自由拖拽图片并点击展开的效果。这个功能在许多现代网页设计中非常常见，例如在相册、画廊或者产品展示中。jQuery库以其简洁的API和强大的功能，使得实现这种交互...
在这个特定的案例中，我们关注的是一个基于jQuery UI的创新实现——“可自由拖拽的弹性圆形菜单效果”。 这个效果的核心在于将jQuery UI的交互性与动画库anime.js相结合，创造出一种引人注目的用户体验。jQuery UI...
"JQuery自由拖动的框架包"是一个利用jQuery实现的轻量级插件，允许用户在网页上自由地拖动层（div）或其他Web元素，为用户提供了高度互动的界面体验。 首先，我们要理解jQuery的基本概念。jQuery由John Resig在2006...
综上所述，jQuery Gridly 拖拽排序插件提供了强大的布局管理和拖放功能，其回调机制则为开发者提供了获取拖动位置信息的能力，进而实现各种定制化的交互体验。无论你是构建一个简单的卡片布局还是一个复杂的项目管理...
jquery插件示例----可自由拖动板块的页面
标题 "jQuery自由拖拽图片点击展开特效.rar" 描述了一个基于jQuery实现的互动网页效果，允许用户自由拖动图片，并且在点击时能够展开。这个特效适用于提升用户体验，特别是对于那些希望用户能与图片进行更深入交互的...
【jQuery自由拖拽图片点击展开特效】是一种基于JavaScript库jQuery实现的交互式图片展示功能，它赋予用户在网页上自由拖动图片的能力，并且当用户点击图片时，能够触发一个扩展效果，显示与图片相关的文字描述。...
<h1 class="datouwang">jQuery表格列自由拖动排序 点击排序"> 序列 点击排序"> 名称 点击排序"> 数量 点击排序"> 单价(Q点) 点击排序"> 总计(Q点) <td>1 农场话费A <td>2 <td>50 <td>100...
今天我们要来分享一款很实用的jQuery插件，它可以自由地拖拽网页上的任意元素，更不错的是，我们可以控制其拖拽的方向，比如只允许水平拖拽和只允许垂直拖拽，另外，也可以设置拖拽的hander，即鼠标在某区域是触发...
"jquery实现简单图片的拖动"这个主题是关于如何利用jQuery的API来实现图片元素的拖放功能，这是一个常见的交互设计，使得用户可以通过鼠标拖动图片在页面上自由移动。 在jQuery中，实现图片拖动主要涉及到`...
JQuery 拖拽功能是基于 jQuery UI 库的一个强大特性，它允许用户通过鼠标操作元素在页面上自由移动，增强了交互性和用户体验。在实现拖拽效果时，我们需要引入 jQuery UI 的相关库，包括 `jquery.ui.core`, `jquery....
可对列表自由拖拽排序的jQuery插件可对列表自由拖拽排序的jQuery插件可对列表自由拖拽排序的jQuery插件可对列表自由拖拽排序的jQuery插件可对列表自由拖拽排序的jQuery插件可对列表自由拖拽排序的jQuery插件可对列表...
【jQuery图片拖拽实例】是一个基于JavaScript库jQuery实现的交互式功能，允许用户通过鼠标拖动操作来移动页面上的图片。这个实例展示了如何利用jQuery的事件处理和DOM操作能力，为用户提供直观且易于使用的界面体验...
用户可以通过鼠标拖动各个面板或模块，自由改变它们在页面上的位置。这一功能使得布局更加灵活，用户可以根据个人偏好定制工作空间。 ### 2. 关闭与展开 组件提供关闭和展开功能，用户可以轻松隐藏或显示特定的区域...