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


Posted in Javascript onMarch 10, 2007

拖放某个元素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" }     // 解答  // ?竦?nbsp; 
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中。有空再说。

Javascript 相关文章推荐
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
AngularJS自动表单验证
Feb 01 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
JS使用Dijkstra算法求解最短路径
Jan 17 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
详解Vue router路由
Nov 20 Vue.js
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 #Javascript
学习YUI.Ext 第三天
Mar 10 #Javascript
学习YUI.Ext 第二天
Mar 10 #Javascript
学习YUI.Ext基础第一天
Mar 10 #Javascript
JavaScript触发器详解
Mar 10 #Javascript
又一个图片自动缩小的JS代码
Mar 10 #Javascript
基础的prototype.js常用函数及其用法
Mar 10 #Javascript
You might like
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
文字幻灯片
2006/06/26 Javascript
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
JQuery开发的数独游戏代码
2010/10/29 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
使用AOP改善javascript代码
2015/05/01 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
Vue中Axios从远程/后台读取数据
2019/01/21 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
Python3.x中自定义比较函数
2015/04/24 Python
python实现的希尔排序算法实例
2015/07/01 Python
django的csrf实现过程详解
2019/07/26 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
中学生在校期间的自我评价分享
2013/11/13 职场文书
家长对孩子的感言
2014/03/10 职场文书
父母对孩子说的话
2014/04/12 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
Python中time标准库的使用教程
2022/04/13 Python
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS