zoukankan      html  css  js  c++  java

  • JQuery UI的拖拽功能

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

    最简单的例子

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

    01 <html>
    02 <head></head>
    03 <body>
    04 <div id="container">
    05 <div id="dragsource">
    06 <p>拽我!</p>
    07 </div>
    08 </div><!-- End container -->
    09 <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
    10 <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
    11 <script>
    12 $(function() {
    13 $( "#dragsource" ).draggable();
    14 })
    15 </script>
    16 </body>
    17 </html>

    拖动到另一个容器

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

    01 <html>
    02 <head></head>
    03 <body>
    04 <div id="container">
    05 <div id="dragsource">
    06 <p>拽我!</p>
    07 </div>
    08 </div><!-- End container -->
    09  
    10 <div id="droppalbe" style=" 300px;height:300px;background-color:gray">
    11 <p>Drop here</p>
    12 </div>
    13  
    14 <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
    15 <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
    16 <script>
    17 $(function() {
    18 $( "#dragsource" ).draggable();
    19 $( "#droppable" ).droppable();
    20 })
    21 </script>
    22 </body>
    23 </html>

    事件监听和回显（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。看一下实际的例子：

    01 <html>
    02 <head>
    03  
    04 </head>
    05 <body>
    06 <div id="dragsource">
    07 <p id="targetMsg">:-|</p>
    08 </div>
    09  
    10 <div id="droppable" style="background-color:gray;height:300">
    11 <p>Can drop! </p>
    12 </div>
    13  
    14 <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
    15 <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
    16 <script>
    17 $(function() {
    18 $( "#dragsource" ).draggable({
    19 start: function(event,ui) {
    20 $(this).find("p").html(":-S");
    21 },
    22 stop:function(event,ui){
    23 $(this).find("p").html(":-|");
    24 }
    25 });
    26  
    27 $( "#droppable" ).droppable({
    28 activate: function(event,ui) {
    29 $(this).find("p").html( "Drop here !" );
    30 },
    31 over: function(event,ui) {
    32 $( this ).find( "p" ).html( "Oh, Yeah!" );
    33  
    34 },
    35 out: function(event,ui) {
    36 $( this ).find( "p" ).html( "Don't leave me!" );
    37  
    38 },
    39 drop: function( event, ui ) {
    40 $( this ).find( "p" ).html( "I've got it!" );
    41 }
    42 });
    43 })
    44 </script>
    45 </body>
    46 </html>

    复制拖动

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

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

    01 <html>
    02 <head></head>
    03 <body>
    04  
    05 <div id="dragsource">
    06 <p>拽我!</p>
    07 </div>
    08 <div id="container" style="background-color:gray;height:300">
    09 </div><!-- End container -->
    10 <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
    11 <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
    12 <script>
    13 $(function() {
    14 $( "#dragsource" ).draggable({
    15 helper:"clone"
    16 });
    17  
    18 $("#container").droppable({
    19 drop:function(event,ui){
    20 $(this).append($("<p style='position:absolute;left:"+
    21 ui.offset.left+";top:"+ui.offset.top+"'>clone</p>"));
    22 }
    23 });
    24 })
    25 </script>
    26 </body>
    27 </html>

    拖动控制

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

    拖动方向

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

    01 <html>
    02 <head></head>
    03 <body>
    04  
    05 <div id="dragX">
    06 <p>－－</p>
    07 </div>
    08 <div id="dragY">
    09 <p>|</p>
    10 </div>
    11  
    12 <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
    13 <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
    14 <script>
    15 $(function() {
    16 $("#dragX").draggable({axis:"x"});
    17 $("#dragY").draggable({axis:"y"});
    18 });
    19 </script>
    20 </body>
    21 </html>

    拖动范围

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

    01 <html>
    02 <head></head>
    03 <body>
    04 <div id="container" style="background-color:gray;height:300">
    05 <div id="draggable1" style="background-color:red;height:20;100">
    06 <p>in parent</p>
    07 </div>
    08  
    09 <div id="draggable2" style="background-color:green;height:20;100">
    10 <p>in regin</p>
    11 </div>
    12  
    13 <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
    14 <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
    15 <script>
    16 $(function() {
    17 $("#draggable1" ).draggable({containment: "parent" });
    18 $("#draggable2").draggable({containment: [20,20,300,200] });
    19 });
    20 </script>
    21 </body>
    22 </html>

    拖动吸附

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

    01 <html>
    02 <head>
    03 <style>
    04 .draggable {background-color:green; 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }
    05 </style>
    06 </head>
    07 <body>
    08 <div id="container" style="background-color:gray;height:300">
    09 <div id="draggable1" class="draggable">
    10 <p>吸附到其他可拖拽元素</p>
    11 </div>
    12  
    13 <div id="draggable2" class="draggable">
    14 <p>吸附到容器</p>
    15 </div>
    16  
    17 <div id="draggable3" class="draggable">
    18 <p>吸附到网格(30x30)</p>
    19 </div>
    20 </div><!--container-->
    21  
    22 <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
    23 <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
    24 <script>
    25 $(function() {
    26 $("#draggable1").draggable({ snap: true });
    27 $("#draggable2").draggable({ snap: "#container"});
    28 $("#draggable3").draggable({grid: [30,30]});
    29 });
    30 </script>
    31 </body>
    32 </html>

    拖动把手（handle）

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

    1 <div id="draggable">
    2 <p>handle</p>
    3 </div>
    4 ……
    5 <script>
    6 $("#draggable").draggable({handle:"p"});
    7 </script>

    Drop限制

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

    增强用户体验

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

    查看源码
     
    打印?
    01 <html>
    02 <head>
    03 <style>
    04 .draggable {background-color:green; 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }
    05 .droppable { 300px; height: 300px; background-color:red}
    06  
    07 </style>
    08 </head>
    09 <body>
    10 <div id="draggable2" class="draggable">
    11 <p>I revert when I'm not dropped</p>
    12 </div>
    13  
    14 <div id="droppable" class="droppable">
    15 <p>Drop me here</p>
    16 </div>
    17 <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
    18 <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
    19 <script>
    20 $(function() {
    21 $( "#draggable2").draggable({ revert: "invalid",cursor: "move", cursorAt: { top: 56, left: 56 } });
    22 $( "#droppable" ).droppable({
    23 activeClass: "ui-state-hover",
    24 hoverClass: "ui-state-active",
    25 drop: function( event, ui ) {
    26 $( this )
    27 .addClass( "ui-state-highlight" )
    28 .find( "p" )
    29 .html( "Dropped!" );
    30 }
    31 });
    32 });
    33 </script>
    34 </body>
    35 </html>

    小结

    JQuery UI提供了强大的拖拽功能和良好的用户体验，同时又非常容易使用。本文介绍了常用的各种用法。更多的参数还可以参考项目主页的Draggable 和 Droppable 。

    转自：http://www.cnblogs.com/holbrook/archive/2012/03/13/2394111.html
  • 相关阅读:
    程序输出小学四则运算表达式，支持真分数四则运算
    自我介绍
    一维数组求最大子数组的和（首位相邻32位）
    一维数组子数组求最大和
    第三周进度条
    第三周总结PSP日志文件
    四则运算<3>单元测试
    四则运算<3>
    30道四则运算<2>单元测试
    构建之法阅读笔记02
  • 原文地址：https://www.cnblogs.com/ranzige/p/3670211.html
Copyright © 2011-2022 走看看