解决方案 »
- 为什么我放在request中值到jsp页面没有了呢
- Hibernian反射连接不上oracle数据库 求急~!!!
- jsp中怎样使从数据库中取得新闻标题在一个div中隔几秒换一次?
- 求助:在线等,最后30分。hibernate一对多查询子表的问题
- javascripe 问题。大哥帮我解决一下!!!
- JS级联问题
- 有Java基础,已自学JSP,也写过一些小型的JSP程序.苦于很难再提高自己,各位过来人介绍一本好书或好方法给我吧.好书的话最好写清楚书名,谢谢
- 500分求救~~求大侠帮忙改错~~~~~
- jb编译时遇到如下问题,怎么解决呢?急!!!!
- 逐渐显示10个helloword,,100分招标讲懂之人:)
- 我的登录页面出问题了 --急盼高手指点!
- ApplicationContextAware 得不到Bean
$(function(){
$(".dragDrop").dragDrop();
});在你需要用到的页面引入该js文件,在需要拖动的div加上class="dragDrop" ,即可
js文件 drag.js (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);
$(function(){
$(".drag").dragDrop();
});测试页面 test.html<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="drap.js"></script><script type="text/javascript">
</script><div id="drag" class="drag" style="width:50px;height:50px;background:red;"></div>
<br>
<div id="drag1" class="drag" style="width:50px;height:50px;background:red;"></div>
jquery里有个live方法 有这种效果 但是他只支持他定义的那些事件
还有拖拽,这个ui插件里不是都有么