1. references js file
<script type="text/javascript" src = jquery-easyui/jquery.min.js> </script> <script type="text/javascript" src = jquery-easyui/jquery.easyui.min.js> </script> <script type="text/javascript" src = jquery-easyui/locale/easyui-lang-zh_CN.js> </script> <script type="text/javascript" src ="index.js"></script> ->Custom JS<-!
2. Reference css file
<link rel="stylesheet" href="jquery-easyui/themes/default/easyui.css"> <link rel="stylesheet" href="jquery-easyui/themes/icon.css">
3. The first demo
<!DOCTYPE html> <html> <head> <title>easyui学习</title> <script type="text/javascript" src = jquery-easyui/jquery.min.js> </script> <script type="text/javascript" src = jquery-easyui/jquery.easyui.min.js> </script> <script type="text/javascript" src = jquery-easyui/locale/easyui-lang-zh_CN.js> </script> <link rel="stylesheet" href="jquery-easyui/themes/default/easyui.css"> <link rel="stylesheet" href="jquery-easyui/themes/icon.css"> </head> <body> <div class="easyui-dialog" style="width:500px;height:500px" data-options="title:'标题 ',collapsible:true,iconCls:'icon-ok'"> 内容部分</div> </body> </html>
4.js call dialog
< Div ID = "Box" title = "title" style = "width: 500px; height: 500px" > content portion </ div >
$(function(){ $('#box').dialog(); })
5. draggable
$(function(){
$('#box').draggable();
})
6. Drag and drop Droppable
<!DOCTYPE html> <html> <head> <title>easyui学习</title> <script type="text/javascript" src = jquery-easyui/jquery.min.js> </script> <script type="text/javascript" src = jquery-easyui/jquery.easyui.min.js> </script> <script type="text/javascript" src = jquery-easyui/locale/easyui-lang-zh_CN.js> </script> <script type="text/javascript" src ="index.js"></script> <!-- 自定义js --> <link rel="stylesheet" href="jquery-easyui/themes/default/easyui.css"> <link rel="stylesheet" href="jquery-easyui/themes/icon.css"> </head> <body> <div id="dd" style="width: 600px;height: 600px;background-color:red;" ></div> <div id ="box" title="标题" style="width:500px;height:500px;background-color: green;"> <span id="span">内容部分</span> </div> <!-- <div id ="box" title="标题" style="width:500px;height:500px"> 内容部分 </div> --> </div> </body> </html>
$(function(){ $("#dd").droppable({ accept:'#box', onDragEnter:function(e,source){ $(this).css("background-color",'blue'); }, onDragLeave:function(e,source){ $(this).css("background-color",'red'); } }); $('#box').draggable(); })