JQuery UI的拖拽功能

时间:2021-03-08 11:51:39

JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互、动画、特效等API,并且封装了一些Web小部件(Widget)。同时,JQuery UI继承了jquery的插件支持,有大量的第三方插件可以丰富JQuery UI的功能。
JQuery UI提供的API极大简化了拖拽功能的开发。只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可。

拖拽原理

首先要明确几个概念。
  ource:拖拽源,要拖动的元素。
  taerget:拖放目标,能够放入source的容器。
拖拽的动作分解如下:
  1. drag start:在拖拽源(source)上按下鼠标并开始移动
  2. drag move: 移动过程中
  3. drag enter:  移动进入目标(target)容器
  4. drag leave: 移出目标(target)容器
  5. drop: 在目标(target)容器上释放鼠标
  6. drag end: 结束
在html5之前,页面元素不直接支持拖拽事件。所以都是通过监听鼠标事件并记录拖拽状态的方式来实现拖拽功能。

最简单的例子

最简单的拖拽是不改变元素所在的容器,而只改变其位置。例子如下:

JQuery UI的拖拽功能
<html>
<head></head>
<body>
<div id="container">
<div id="dragsource">
<p>拽我!</p>
</div>
</div><!-- End container -->
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script>function"" ).draggable();
})
</script>
</body>
</html>
JQuery UI的拖拽功能

拖动到另一个容器

更常见的场景是将元素拖动到另一个容器中。这就需要在drop目标(target)容器上应用droppable函数。让我们在上一个例子的基础上,增加一个div作为容器,并应用droppable函数:

JQuery UI的拖拽功能
<html>
<head></head>
<body>
<div id="container">
<div id="dragsource">
<p>拽我!</p>
</div>
</div><!-- End container --> <div id="droppalbe" style="width: 300px;height:300px;background-color:gray">
<p>Drop here</p>
</div> <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script>function"" ).draggable();
$( #droppable ).droppable();
})
</script>
</body>
</html>
JQuery UI的拖拽功能

事件监听和回显(Feedback)

运行上一个例子,你可能会产生疑惑,真的放到目标容器上了吗?用户也会产生同样的疑惑。所以,可以监听拖动过程中发生的一些事件,并用可见的方式让用户知道。这就叫做回显(Feedback)。

对于源(source),可以监听的事件包括:

  create: 在source上应用draggable函数时触发
  start:开始拖动时触发
  drap:拖动过程中触发
  stop:释放时触发
对于目标(target),可以监听的事件包括:
  create: 在target上应用droppable函数时触发
  activate:如果当前拖动的source可以drop到本target,则触发
  deactivate:如果可以drop到本target的拖拽停止,则触发
  over:source被拖动到target上面
  out:source被拖动离开target
  drop:source被释放到target
事件处理函数都是通过draggable和droppable函数的参数传递,在这些事件处理函数中就可以进行Feedback。看一下实际的例子:

JQuery UI的拖拽功能
<html>
<head> </head>
<body>
<div id="dragsource">
<p id="targetMsg">:-|</p>
</div> <div id="droppable" style="height:300">
<p>Can drop! </p>
</div> <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script>function""functionthis"""");
},
stop:(event,ui){
$().find(p).html(:-|);
}
}); $( #droppable ).droppable({
activate: (event,ui) {
$().find(p).html( Drop here ! );
},
over: (event,ui) {
$( ).find( p ).html( Oh, Yeah! ); },
out: (event,ui) {
$( ).find( p ).html( Don't leave me! ); },
drop: ( event, ui ) {
$( ).find( p ).html( I've got it! );
}
});
})
</script>
</body>
</html>
JQuery UI的拖拽功能

复制拖动

前面的例子都是移动元素,另一种常见的场景是复制拖动。比如visio中的从画板中拖动元素到画布。这是通过draggable函数的helper参数设定的。

helper可以指定为“original”, "clone",其中"original"是默认值,即拖动自身,而clone表示创建自身的一个克隆用于拖拽。helper还可以指定为函数,该函数返回一个自定义的DOM元素用于拖拽。
当不是拖动自身的时候,需要在target上指定drop事件函数,在该函数中将特定的元素添加到target容器上,否则drop的时候什么事情都不会发生。
简单复制的例子如下:

JQuery UI的拖拽功能
<html>
<head></head>
<body> <div id="dragsource">
<p>拽我!</p>
</div>
<div id="container" style="height:300">
</div><!-- End container -->
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script>function""""
}); $(#container).droppable({
drop:(event,ui){
$().append($(<p style='position:absolute;left:++;top:++'>clone</p>));
}
});
})
</script>
</body>
</html>
JQuery UI的拖拽功能

拖动控制

到目前位置,所有的例子中都可以对source随意拖动。在实际应用中经常需要对拖动行为进行控制。下面给出几个例子。

拖动方向

默认拖动方向为x,y两个方向。通过draggable的axis参数可以限制只能水平或竖直拖动。如下:

JQuery UI的拖拽功能
<html>
<head></head>
<body> <div id="dragX">
<p>--</p>
</div>
<div id="dragY">
<p>|</p>
</div> <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script>function""""});
$(#dragY).draggable({axis:y});
});
</script>
</body>
</html>
JQuery UI的拖拽功能

拖动范围

除了方向之外,还可以通过containment参数约束拖动的范围。该参数接受Selector, Element, String, Array类型。其中String可以为parent,document,window,Array是指定一个矩形区域(regin)的四元数组: [x1,y1,x2,y2]。下面的例子分别指定了parent和regin作为范围限制:

JQuery UI的拖拽功能
<html>
<head></head>
<body>
<div id="container" style="height:300">
<div id="draggable1" style="height:20;width:100">
<p>in parent</p>
</div> <div id="draggable2" style="height:20;width:100">
<p>in regin</p>
</div> <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script>function"""" });
$(#draggable2).draggable({containment: [,,,] });
});
</script>
</body>
</html>
JQuery UI的拖拽功能

拖动吸附

还可以在拖动的时候吸附到其他元素或网格。使用snap参数指定要吸附到的元素,使用grid参数指定吸附到网格,如下:

JQuery UI的拖拽功能
<html>
<head>
<style>{:;:;:;:;:;:;:;
</style>
</head>
<body>
<div id="container" style="height:300">
<div id="draggable1" class="draggable">
<p>吸附到其他可拖拽元素</p>
</div> <div id="draggable2" class="draggable">
<p>吸附到容器</p>
</div> <div id="draggable3" class="draggable">
<p>吸附到网格(30x30)</p>
</div>
</div><!--container--> <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script>function""true });
$(#draggable2).draggable({ snap: #container});
$(#draggable3).draggable({grid: [,]});
});
</script>
</body>
</html>
JQuery UI的拖拽功能

拖动把手(handle)

默认是整个元素都可以拖动,也可以指定元素的某个子元素作为拖动的handle,如:

JQuery UI的拖拽功能
<div id="draggable">
<p>handle</p>
</div>
……
<script>""""});
</script>
JQuery UI的拖拽功能

Drop限制

默认的droppable指定元素能够接受所有的drop, 但是可以通过accept参数限定只能接受某些元素的drop。accept参数的类型为一个符合jquery selector的字符串。例如:
$(".selector").droppable({ accept: '.special' })
表示只接受具有special 样式的元素。

增强用户体验

前面是实现拖拽的功能,JQueryUI还有一些参数可以增强用户体验。比如,cursor参数可以指定鼠标指针的形状,cursorAt指定鼠标指针在source的相对位置,revert可以指定当drop失败时source“飘”回原来的位置。一个组合的例子如下:

JQuery UI的拖拽功能
<html>
<head>
<style>{:;:;:;:;:;:;:;
.droppable width 300px height 300px background-colorred </style>
</head>
<body>
<div id="draggable2" class="draggable">
<p>I revert when I'm not dropped</p>
</div> <div id="droppable" class="droppable">
<p>Drop me here</p>
</div>
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script>function""""""5656 } });
$( #droppable ).droppable({
activeClass: ui-state-hover,
hoverClass: ui-state-active,
drop: ( event, ui ) {
$( )
.addClass( ui-state-highlight )
.find( p )
.html( Dropped! );
}
});
});
</script>
</body>
</html> ----------------------------------------------------------------------------------------------------------------------
Default:
$(”#draggable”).draggable();
============================================================
constrain-movement(限制范围移动):
$(”#draggable”).draggable({ axis: ‘y' }); //限制y轴
$(”#draggable2″).draggable({ axis: ‘x' }); //限制x轴
$(”#draggable3″).draggable({ containment: ‘#containment-wrapper', scroll: false }); //不出现滚动条
$(”#draggable4″).draggable({ containment: ‘#demo-frame' });
$(”#draggable5″).draggable({ containment: ‘parent' }); //限制在父系框架中
============================================================
delay-start(延时移动):
$(”#draggable”).draggable({ distance: 20 }); //移动20像素开始拖动
$(”#draggable2″).draggable({ delay: 1000 });//延迟1秒后开始拖动
============================================================
snap-to (吸附移动):
$(”#draggable”).draggable({ snap: true }); //默认,任何方式吸附
$(”#draggable2″).draggable({ snap: ‘.ui-widget-header' }); //以某元素的内外径吸附
$(”#draggable3″).draggable({ snap: ‘.ui-widget-header', snapMode: ‘outer' }); //以某元素外径吸附,吸附方式:本上吸其下,本下吸其上. 内径吸附:inner, 吸附方式:相反
$(”#draggable4″).draggable({ grid: [20,20] });//以一定距离移动
$(”#draggable5″).draggable({ grid: [80, 80] });
============================================================
scroll:
$(”#draggable”).draggable({ scroll: true });
$(”#draggable2″).draggable({ scroll: true, scrollSensitivity: 100 }); //滚动条敏感度
$(”#draggable3″).draggable({ scroll: true, scrollSpeed: 100 }); //滚动速度
============================================================
revert position(恢复到原始位置):
$(”#draggable”).draggable({ revert: true }); //revert:true 设置为恢复到位置
$(”#draggable2″).draggable({ revert: true, helper: ‘clone' }); //helper:'clone' 复制拖动
============================================================
visualfeedback (视觉效果):
$(”#draggable”).draggable({ helper: ‘original' }); //设置不复制(初始化设置)
$(”#draggable2″).draggable({ opacity: 0.7, helper: ‘clone' }); //opacity设置透明度,并克隆元素
$(”#draggable3″).draggable({
cursor: ‘move', //设置鼠标图形
cursorAt: { top: -12, left: -20 }, //位置定位坐标设置
helper: function(event) {
return $('
I\'m a custom helper
');
} //新建提示元素,上面设置其以鼠标定位位置值
});
$(”#set div”).draggable({ stack: { group: ‘#set div', min: -1 } });//群组设置拖动,并且最后添加的元素叠加到该群组的最上面.适合做许愿板效果。
============================================================
Drag handle (拖动点设置):
$(”#draggable”).draggable({ handle: ‘p' }); //handle设置实现拖动位置
$(”#draggable2″).draggable({ cancel: “p.ui-widget-header” }); //cancel设置限制拖动位置
============================================================
Cursor style (鼠标样式):
$(”#draggable”).draggable({
cursorAt: { cursor: ‘move', top: 56, left: 56 } }); //cursor设置鼠标样式,
top、left、right、bottom设置元素相对鼠标的定位点
$(”#draggable2″).draggable({ cursorAt: { cursor: ‘crosshair', top: -5, left: -5 } });
$(”#draggable3″).draggable({ cursorAt: { bottom: 0 } });
===========================================================
Cursor style (鼠标样式):
$(”#draggable”).draggable({
cursorAt: { cursor: ‘move', top: 56, left: 56 } }); //cursor设置鼠标样式,
top、left、right、bottom设置元素相对鼠标的定位点
============================================================
Draggable+sortable:
$(”#sortable”).sortable({
revert: true
});
$(”#draggable”).draggable({
connectToSortable: ‘#sortable', //设置拖动加入到其他列表中
helper: ‘clone',
revert: ‘invalid'
});