黑马程序员技术交流社区

标题: 分享JQuery EasyUI的学习笔记: 可放置组件-droppable [打印本页]
作者: heshiwei    时间: 2015-9-22 10:04
标题: 分享JQuery EasyUI的学习笔记: 可放置组件-droppable

继续前一章的可拖动组件，和Java的关系不大。可以和JavaWeb配合使用，做网站的管理后天比较不错，希望对大家有用。


属性
        accept: null/selector 确定哪些元素被接受
        disabled：false/boolean 如果为true，则禁止放置

事件
        onDragEnter 参数：e,source 在被拖拽的元素进入放置区内的时候触发
        onDragOver  参数：e,source 在被拖拽的元素经过放置区的时候触发
        onDragLeave 参数：e,source 在被拖拽的元素离开放置区内的时候触发
        onDrop      参数：e,source 在被拖拽的元素放到到放置区内的时候触发


方法
        options 参数：none 返回对象的属性
        enable  参数：none 启用放置功能
        disable 参数：none 禁用放置功能


修改默认值：
$.fn.droppable.defaults.disabled = true;

示例代码：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>jQuery Easy UI</title>
  5. <meta charset="UTF-8" />
  6. <script type="text/javascript" src="easyui/jquery.min.js"></script>
  7. <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
  8. <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
  9. <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
  10. <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />

  12. <script type="text/javascript">
  13.         $(function (){
  14.                 $('#box').draggable({
  15.                         revert:false,
  16.                         cursor:null,
  17.                         handle:null,
  18.                         disabled:false,
  19.                         edge:0,
  20.                         axis:null,

  22.                         onBeforeDrag:function (e){
  23.                                 // alert('beforeDrag');
  24.                         },
  25.                         onStartDrag:function (e){
  26.                                 // console.log(e);
  27.                         },
  28.                         onDrag:function (e){
  29.                                 // console.log(e);
  30.                         },
  31.                         onStopDrag:function (e){
  32.                                 // alert('stop');
  33.                         }
  34.                 });

  36.                 // $('#box').draggable('disable')
  37.                 // console.log( $('#box').draggable('options') );

  39.                 $('#container').droppable({
  40.                         accept:'#box',
  41.                         onDragEnter:function (e, source){
  42.                                 $(this).css('background','green');
  43.                         },
  44.                         onDragLeave:function (e,source){
  45.                                 console.log(source);
  46.                         },
  47.                         onDrop:function (e, source){
  48.                                 // alert('onDrop');
  49.                                 $(source).appendTo($(this));
  50.                                 $(source).css('top','0px').css('left','0px').css('position','relative');
  51.                         }
  52.                        
  53.                 });
  54.         });

  56. </script>
  57. </head>
  58. <body>
  59.         <div id="container" style="width:300px;height:300px;border:1px solid #ccc">       
  60.         </div>

  62.         <div  id="box" style="width:100px;height:100px;background:red">
  63.                 <span id="draggableText">文本内容</span>
  64.         </div>
  65. </body>
  66. </html>

复制代码







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2