1. <html>
  2. <head><title>draggable</title>
  3. <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
  4. <script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
  5. </head>
  6. <body>
  7. <div id="container" style="background-color:#ccc;width:500px;height:300px;">
  8.     <div class="alert alert-dismissable alert-info dragsource">
  9.     <p>aaaa</p>
  10.     </div>
  11.     <div class="alert alert-dismissable alert-info dragsource">
  12.     <p>bbbb</p>
  13.     </div>
  14.     <div class="alert alert-dismissable alert-info dragsource">
  15.     <p>cccc</p>
  16.     </div>
  17. </div>
  18. </body>
  19. </html>
  20. <script type="text/javascript">
  21.     $(function () {
  22.         $(".dragsource").draggable({
  23.             revert: "invalid",
  24.             cursor: "move", //移动时鼠标的位置
  25.             cursorAt: { top: 56, left: 56 },
  26.             snap: ".dragsource",//吸附到其他可托动元素
  27.             containment: "parent",//限制拖放范围,亦可以用四元数组
  28.             //axis: "y",//只可以沿着Y轴拖动
  29.             start: function (event, ui) {
  30.                 //$(this).find("p").html("Starting");
  31.             },
  32.             stop: function (event, ui) {
  33.                 // $(this).find("p").html("stop");
  34.             }
  35.         });
  36.         $("#container").droppable({
  37.             //activeClass: "ui-state-hover",
  38.             //hoverClass: "ui-state-active",//拖动时的样式
  39.             activate: function (event, ui) {
  40.                 // $(this).find("p").html( "Drop here !" );
  41.             },
  42.             over: function (event, ui) {
  43.                 // $( this ).find( "p" ).html( "Oh, Yeah!" );
  44.  
  45.             },
  46.             out: function (event, ui) {
  47.                 // $( this ).find( "p" ).html( "Don't leave me!" );
  48.  
  49.             },
  50.             drop: function (event, ui) {
  51.                 //拖放
  52.                 // $(this).addClass("ui-state-highlight").find("p").html("Dropped!");
  53.             }
  54.         });
  55.     })
  56.     </script>

　　

jquery UI Draggable和Droppable 案例的更多相关文章

  1. JQuery UI Draggable插件使用说明文档

    JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动.Draggable的元素受css: ui-draggable影响, 拖动过程中的css: ui-draggable-drag ...

  2. 让 jQuery UI draggable 适配移动端

    背景: 在移动端,本人要实现对某个元素的拖动,想到使用 jQuery UI 的 draggable 功能.但是发现此插件的拖动只支持PC端,不支持移动端. 原因: 原始的 jQuery UI 里,都是 ...

  3. jquery ui draggable,droppable 学习总结

    刚接触的时候,分不清draggable和droppable的区别,瞎弄了一会,其实很简单,draggable就是“拖”的功能,droppable就是“放”的功能. draggable()是被拖动的元素 ...

  4. jQuery UI - draggable 中文API

    ·概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个 ...

  5. JQuery UI - draggable(转)

    ·概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个 ...

  6. JQuery UI - draggable参数中文详细说明

    概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个参 ...

  7. Jquery ui draggable在chrome和ie7下的bug

    当页面足够长,向下滚动一些之后, 在拖动时,被拖动的div会向下产生滚动距离那么高(scrolltop)的差距 鼠标位置距div顶部差距了正好页面scroll的距离,页面scoll越多差的越多. 解决 ...

  8. jQuery UI Draggable + Sortable 结合使用

    工作中需要将一个左边的设计好的控件,拖拽到右边的面板中,同时保持右边面板中的控件自由排序,这时候就需要及支持拖拽又支持排序的操作了, Demo截图:从左边控件拖到右边区域 代码段: <scrip ...

  9. JQuery UI - selectable

    ·概述 Selectable插件允许用户对指定的元素进行选中的动作.此外还支持按住Ctrl键单击或拖拽选择多个元素. 官方示例地址:http://jqueryui.com/demos/selectab ...

随机推荐

  1. Servlet实现web站点文件下载功能示例

    前段时间事情比较多,导致二月份没有记录自己的学习情况.最近接触了servlet,参考韩老师的教程自己写了一个web站点文件下载的小项目,该项目中还加入了简单的反盗链技术. 1.首先创建一个Shared ...

  2. 部门招聘开发人员（python相关）

    岗位职责: 1.参与需求分析,产品设计,功能开发: 2.负责系统平台的日常维护: 3.与团队技术交流,共同进步 任职要求: 1.精通Python:对Python有兴趣. 2.熟悉MVC架构,精通Dja ...

  3. sirius的python学习笔记（1）

    1.可以通过try...except语句来简单的判断字符串是否为整数值,如例程 x = raw_input('>') try: print int(x) except ValueError: r ...

  4. 初识shell脚本

    shell字符串.shell数组.shell echo指令.shell test命令.shell if语句.shell case语句.shell for语句.shell while语句.shell b ...

  5. 1021.Deepest Root (并查集+DFS树的深度)

    A graph which is connected and acyclic can be considered a tree. The height of the tree depends on t ...

  6. Postgresql 技巧

    备份 pg_dump -f "F:/dump.sql"<file name> -U postgres<database name> -h 10.38.197 ...

  7. 在一个工程管理多个应用－b

    Demo:http://download.csdn.net/detail/u012881779/9166527 本文的产生是因产品经理提出的特殊需求: 一个针对多所学校的应用,对不同学校需要分别使用一 ...

  8. 在工程中添加pch文件

    在Xcode6之前,新建一个工程的时候,系统会帮我们自动新建一个以工程名为名字的pch (precompile header)文件,在开发过程中,可以将那些整个工程都广泛使用的头文件包含在该文件下,编 ...

  9. 安装oracle 11g详细过程仅供参考

  10. 明晰三种常见存储技术：DAS、SAN和NAS

    随着企业网络应用的时间和应用的数据量的加大,企业已经感觉到存储容量和性能落后与网络的应用发展需求,特别是流媒体企业,在这种应用条件下满足用户的存储需求的技术应用诞生,DAS.NAS和SAN三种存储技术 ...