前端CSS框架 前端CSS框架 上机3-拖拽+放置.docxVIP

实验3 实验题目：easyui 基础工具类组件 实验原理：基础工具、方法、事件 实验内容： 1、draggable（拖动） 练习1：简单拖动 div class=out div id=drag class=easyui-draggable in b要拖动的div/b /div /div 效果： 练习2：面板实现拖动：将面板放在draggable的div里面 （1）、属性： 例如 单词解释： 属性含义解释如下 练习3：proxy属性：用来指定在拖动元素过程中所使用的代理元素，这个代理元素只在拖动的过程中可见。 展示如何使 HTML 元素可拖动，在本例中，我们将创建三个 DIV 元素然后启用他们的拖动和放置。 style type=text/css .dd-demo{ width:60px; height:60px; border:2px solid #d3d3d3; position:absolute; } .proxy{ border:1px dotted #333; width:60px; height:60px; text-align:center; background:#fafafa; } #dd1{ background:#E0ECFF; left:20px; top:20px; } #dd2{ background:#8DB2E3; left:100px; top:20px; } #dd3{ background:#FBEC88; left:180px; top:20px; } /style appendTo：appendTo() 方法在被选元素的结尾插入 HTML 元素 代码解释：proxy（代理元素）仅仅在拖动过程中才可见。它的值两种情况：1、clone：生成新的元素。一旦停止拖动，被拖动元素将移动到新位置，替代元素消失；2、通过函数创建代理元素。 注意：1、函数必须有返回值，而且只能返回对象 练习4、在通过函数创建拖动代理元素时，可以传递一个参数source（被拖动元素对象），请大家在创建代理元素的过程中显示被拖动元素的文本内容。 div id=dd3 class=dd-demo被拖动的div文本内容/div addClass（）--添加类，removeClass删除类 Html（）方法设置或返回被选元素的内容（innerHTML）。 （2）、方法 （3）事件 练习5：在开始拖动时将光标改为“not-allowed”形状，并同时给代理元素使用proxy样式；停止拖动时将光标的样式改为“auto” 注：$(this)表示被拖动的元素对象 2、droppable 通过标记创建可放置（droppable）区域。 使用 javascript 创建可放置（droppable）区域。 案例： 拖动内容部分 HTML代码： div id=ddstyle=width:600px;height:400px;background:black /div div id=box style=width:100px;height:100px;background:#ccc; span id=pox内容部分/span /div Js代码： 例2：书上案例 Html代码 div id=source class=out style=width:72px; div class=title选择项/div div class=dragitem苹果/div div class=dragitem香蕉/div div class=dragitem桔子/div div class=dragitem菠萝/div /div div class=easyui-droppable out style=width:220px;height: 326px; /div Css样式 style type=text/css .out{ /*拖动区与放置区的外围样式*/ float:left; margin:20px; border:1px solid #ccc; } .title{ /*拖动区的标题样式*/ margin: 10px; } .dragitem{ /*拖动元素样式*/ border:1px solid #ccc; width:50px; height:50px; line-height: 50px; text-align: center; backg