当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 学习YUI.Ext第五日--做拖放Darg&Drop

Javascript
可实现多表单提交的javascript函数
比较详细的关于javascript中void(0)的具体含义解释
随机显示经典句子或诗歌的javascript脚本
javascript实现的多条新闻公告系统
解析arp病毒背后利用的Javascript技术附解密方法
比较详细的javascript对象的property和prototype是什么一种关系
访问百度和谷歌网速测试的javascript代码
javascript 动态改变层的Z-INDEX的代码style.zIndex
javascript+css实现单击颜色褪去效果
javascript 表单日期选择效果
比较简单的javascript实现input双击后可以编辑
javascript实现的颜色块滑动的动态效果
js实现网页检测是否安装了 Flash Player 插件
javascript 实现父窗口引用弹出窗口的值的脚本
javascript 实现双击才能打开链接的方法
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
document.createElement("A")比较不错的属性
用javascript实现不按Ctrl实现Multiple Select多选
JavaScript-世界上误解最深的语言分析
IE和Mozilla的兼容性汇总event

Javascript 中的 学习YUI.Ext第五日--做拖放Darg&Drop


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 179 ::
收藏到网摘: n/a

拖放某个元素Darg&Drop是windows(视窗)问世时的一个重要特征。现在我们要在浏览器里面实现,怎么做呢?先看看基本例子:
复制代码 代码如下:

YAHOO.example.DDApp = function() {
var dd;
return {
init2: 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";
}
for(i in draggable){
new Draggable(draggable[i]);
}
}
}
} ();
注意的地方:
1.这里用了一个数组先收集好所有要DD(Darg&Drop,下同)的元素,再用for遍历new new YAHOO.util.DD()对象,“捆绑”成一类具有相同属性的对象:Draggable。
2.遇到一个无法入手的问题:
用YUI做Dragdrop,如果你的系统开clearType ,移动之后字体会发毛,估计ie内部render的问题 。本来打算用DDProxy代替,但一用DDProxy就无法继承下去。
3.需手工加入xhtml的holder.

ok这个例子暂告一段落,看看一些好玩的(演示):

复制代码 代码如下:

var correct = { opt0:"ans1", opt1:"ans2", opt2:"ans0" } // 正确答案
var answer = { opt0:"tmp0", opt1:"tmp1", opt2:"tmp2" } // 解答
// 採点
function mark(event)
{
var points = 0; //
var max = 3; //
for (key in correct) {
points += correct[key] == answer[key] ? 1: 0;
}
var score = Math.floor(points / max * 100);
var result = document.getElementById("result");
result.innerHTML = (score > 70 ? "合格": "不合格") + ":" + score + "%";
}
// 初始化
function init(event)
{
var dropzone = [ "ans0", "ans1", "ans2", // 答案栏
"tmp0", "tmp1", "tmp2" ]; // 临时地方(开始放国旗的地方)
for (id in dropzone) {
new YAHOO.util.DDTarget(dropzone[id]);
}

var draggable = [ "opt0", "opt1", "opt2" ]; // 可选项(国旗)
Draggable = function(id, sGroup) {
this.init(id, sGroup);
}
Draggable.prototype = new YAHOO.util.DD();
Draggable.prototype.canAccept = function(draggable, dropzone) {
if (dropzone.id.match(/^opt[012]$/)) {
return false;
}
for (key in answer) {
if (answer[key] == dropzone.id) {
return false;
}
}
return true;
}
Draggable.prototype.startDrag = function(x, y) {
YAHOO.util.Dom.setStyle(this.getEl(), "opacity", 0.5);
}
Draggable.prototype.onDragEnter = function(e, id) {
var dropzone = YAHOO.util.DDM.getElement(id);
var draggable = this.getEl();
if (this.canAccept(draggable, dropzone)) {
dropzone.style.backgroundColor = "orange";
}
}
Draggable.prototype.onDragOut = function(e, id) {
var dropzone = YAHOO.util.DDM.getElement(id);
dropzone.style.backgroundColor = "white";
}
Draggable.prototype.onDragDrop = function(e, id) {
var dropzone = YAHOO.util.DDM.getElement(id);
var draggable = this.getEl();
if (this.canAccept(draggable, dropzone)) {
dropzone.style.backgroundColor = "white";
dropzone.appendChild(draggable);
answer[draggable.id] = dropzone.id; // 解答更新
}
}
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";
}
for (id in draggable) {
new Draggable(draggable[id]);
}
// 绑定按钮触发事件,计算成绩
YAHOO.util.Event.addListener("submit", "click", mark);
}
YAHOO.util.Event.addListener(window, "load", init);

如果再把xhtml贴出来,很长 很烦 。look look DEMO.
好,今天到这儿,严重ot中。有空再说。