jquery ui 拖拽

来源：互联网发布：枪械模拟软件编辑：程序博客网时间：2024/05/18 15:05

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之前，页面元素不直接支持拖拽事件。所以都是通过监听鼠标事件并记录拖拽状态的方式来实现拖拽功能。

最简单的例子

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

<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() {$( "#dragsource" ).draggable();})</script></body></html>

拖动到另一个容器

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

<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() {$( "#dragsource" ).draggable();$( "#droppable" ).droppable();})</script></body></html>

0 0