jQuery Easy UI Droppable(放置)组件
Droppable(放置)组件也是一个基本组件,用法较简单,语法都在例子里面注释了:
示例:
<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" /> <script> $(function () { $.fn.droppable.defaults.disabled = true;//重写默认值为true $('#dd').droppable({ accept : '#box,#ipt',//设置哪些元素可以被接受 disabled : false, //不单独设置默认值时默认为false,当设置为true的时候则禁止放置。 /* onDragEnter只触发一次,而Over会在不停的拖动中不停触发, onDragEnter触发的事件在移动过程中一瞬即逝,所以要想看清楚最好是看浏览器控制台,或者加个alert中断一下。 onDrop是放入到放置区,松开鼠标左键,丢下的操作。 */ onDragEnter : function (e, source) { console.log('昙花一现'); $(this).css('background', 'blue'); //alert('enter'); }, onDragOver : function (e, source) { console.log(source); $(this).css('background', 'orange'); //alert('over'); }, onDragLeave : function (e, source) { console.log(source); $(this).css('background', 'green'); //alert('over'); }, onDrop : function (e, source) { console.log(source); $(this).css('background', 'maroon'); //alert('over'); } }); $('#dd').droppable('disable');//禁止 $('#dd').droppable('enable'); //允许 $('#box').draggable({ accept : '#ipt',//设置哪些元素可以被接受 disabled : false //不单独设置默认值时默认为false,当设置为true的时候则禁止放置。 }); $('#ipt').draggable({ }); }); </script> </head> <body> <div id="dd" class="easyui-droppable" data-options="accept:'#box,#pox,#ipt'" style="width:600px;height:400px;background:#66ffff"> </div> <div id="box" style="width:100px;height:100px;background:#ccc;"> <span id="pox">内容部分</span> </div> <div id="ipt" style="width:50px;height:50px;background:#ccc;"> 内容IPT </div> </body> </html>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。