浏览 5468 次
|
锁定老帖子 主题：yui-ext中的grid拖拽求解！
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2007-05-27
js代码：
var DDExample1 = function(){ function renderKB(size){ return size + " KB"; } function getDDText(){ var count = this.getSelectionCount(); return count == 1 ? '1 selected file' : count + ' selected files'; } return { init : function(){ var dm = new YAHOO.ext.grid.DefaultDataModel([ ['yahoo.js', 1.38], ['dom.js', 11.2], ['event.js', 9.31], ['dragdrop.js', 21.2], ['connection.js', 7.85], ['yui-ext-core.js', 34.9], ['tabs-lib.js', 4.82], ['splitbar-lib.js', 6.79] ]); var cm = new YAHOO.ext.grid.DefaultColumnModel([ {header: 'File', width: 125}, {header: 'Size', width: 72, renderer:renderKB} ]); var grid = new YAHOO.ext.grid.DDGrid('ddgrid1', dm, cm); grid.getDragDropText = getDDText; grid.render(); } }; }(); YAHOO.util.Event.on(window, 'load', DDExample1.init, DDExample1, true); 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2007-05-27
HTML代码：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Array Grid Example</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script> <script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"></script> <script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript" src="array-grid.js"></script> <link rel="stylesheet" type="text/css" href="grid-examples.css" /> <!-- Common Styles for the examples --> <link rel="stylesheet" type="text/css" href="../examples.css" /> </head> <body> <script type="text/javascript" src="../examples.js"></script> <div id="ddgrid1"></div> </body> </html> |
| 返回顶楼 | |
|
发表时间：2007-05-27
EXT D&D是从YUI的体系继承过来的。所以先从YUI入手。
一、www.ajaxjs.com首页的简单拖放效果源码(旧版YUI-EXE .33)：
YAHOO.example.DDApp = function() {
return {
dd: function() {
// var dropzone =["dz"];
// for(i in dropzone){
// new YAHOO.util.DDTarget(dropzone[i]);
// };
var draggable =["dd_1","dd_2","dd_3"]; //数组存放DargDrop的ID
Draggable = function(id, sGroup) {
//建立DragDrop对象。这个必须由YAHOO.util.DragDrop的子类来调用
//Sets up the DragDrop object. Must be called in the constructor of any YAHOO.util.DragDrop subclass
this.init(id, sGroup);
}
Draggable.prototype = new YAHOO.util.DD(); //继承父类
Draggable.prototype.startDrag = function(x, y) {
YAHOO.util.Dom.setStyle(this.getEl(), "opacity", 0.5);
}
Draggable.prototype.endDrag = function(e) { //拖放后返回原点
var draggable = this.getEl();
YAHOO.util.Dom.setStyle(draggable, "opacity", 1.0);
draggable.style.left = "0px";
draggable.style.top = "0px";
//highlight effect
var effect = new YAHOO.ext.Actor(this.getEl(), null, true);
effect.pulsate();
effect.play();
effect =null;
}
for(i in draggable){
new Draggable(draggable[i]);
}
}
}
} ();
YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.dd);
Frank 19:32:36 今日http://www.ajaxjs.com/yuicn/demo.asp的DD 同学不知有没有注意到 建立dd的实例 不是直接new出来的 而是都挂在prototype上的 Frank 19:35:40
var draggable = [ "opt0", "opt1", "opt2" ]; // 可选项（国旗）
Draggable = function(id, sGroup) {
this.init(id, sGroup); // 这init()是挂在prototype上。属于 YAHOO.util.DD的方法
}
Draggable.prototype = new YAHOO.util.DD();
Draggable.prototype.startDrag = function(x, y) {
.....
}
var draggable = [ "opt0", "opt1", "opt2" ]; // 可选项（国旗）
//分别实例化拖放
for (id in draggable) {
new Draggable(draggable[id]);
} Frank 19:49:22
在YUI中，有所谓的Point模式和 Intersect模式，主要区别在于， 在元素与其它DD元素交叉时（视觉上的交叉，平面上的交叉），是以模板的指针为准（point mode）,还是元素外轮廓为准（Intersect模式） Frank 19:49:32 Point Mode versus Intersect Mode By default, the drag and drop interaction is defined by the location of the mouse cursor during the drag operation (Point mode). Intersect mode takes into account the dragged element's dimensions, reporting when that element intersects with any other drag and drop element in its group or groups. Frank 19:50:45 不知道我的理解是否有偏差 我尝试 YAHOO.util.DDM.mode = YAHOO.util.DDM.INTERSECT; 报告“找不到ID的错误 ” Frank 19:51:50 在YUI中，有所谓的Point模式和 Intersect模式，主要区别在于， 在元素与其它DD元素交叉时（视觉上的交叉，平面上的交叉），是以******鼠标*******的指针为准（point mode）,还是元素外轮廓为准（Intersect模式） Frank 19:54:22 ...还在理解YUI的文档... Frank 20:04:38 出错的原因在于 Point mode returns the id of the target Drag and Drop object (e.g., the object over which you are dragging in onDragDrop), while Intersect mode returns an array of Drag and Drop objects instead. point mode的返回的是一个dd对象； intersect的返回的一个array of DD objects Frank 20:05:18 API还说： The reason the Drag and Drop objects are passed to the event handler in Intersect mode is that they contain properties about the interaction that can help determine the most appropriate response in your implementation: Frank 20:07:53 传入DD ojbects到event handler中，这样做的原因是，能利用对象的属性 来 对这个interaction做出某些判断，帮助在实现中 做出决定 Frank 20:08:43 如下面提到的YAHOO.util.Region.getArea Frank 20:09:44 便可用于，计算size是否overlap区域 Frank 20:13:42 YUI的考虑好像挺周全 接着我们看看JACK的代码。按照他的个性，再对YUI DD动手术的改造可能性很大 Frank 20:24:07 见jack的DD api Defines the interface and base operation of items that that can be dragged or can be drop targets. It was designed to be extended, overriding the event handlers for startDrag, onDrag, onDragOver and onDragOut. Frank 20:24:54 实际上这是对www.ajaxjs.com/yui/demo那段代码的最好说明 Frank 20:26:21 原理说明 Frank 20:28:29 然后three html elements： linked element handle element(s)、drag element、YUI里面没有(难道又是jack的个性东西？) |
| 返回顶楼 | |
|
发表时间：2007-05-28
很想知道YUI_EXT的作者平时用什么开发工具
|
| 返回顶楼 | |
|
发表时间：2007-05-28
lpp333 写道 很想知道YUI_EXT的作者平时用什么开发工具
Jack uses JSEclipse to develop Ext. Aptana is similar to JSEclipse in many ways but lacks proper documentation helpstring support. Intellij IDEA is also a ok choice. http://www.yui-ext.com/manual/dev:editors |
| 返回顶楼 | |
