学习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 相关文章推荐
popdiv
Jul 14 Javascript
jQuery 可以拖动的div实现代码 脚本之家修正版
Jun 26 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
原生js中ajax访问的实例详解
Sep 19 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
vue路由权限校验功能的实现代码
Jun 07 Javascript
原生JS实现记忆翻牌游戏
Jul 31 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 Javascript
学习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
使用apache模块rewrite_module (转)
2007/02/14 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
js程序中美元符号$是什么
2008/06/05 Javascript
Jquery 弹出层插件实现代码
2009/10/24 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
python里大整数相乘相关技巧指南
2014/09/12 Python
在类Unix系统上开始Python3编程入门
2015/08/20 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
Python实现OpenCV的安装与使用示例
2018/03/30 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
Python for i in range ()用法详解
2020/09/18 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
法律工作求职自荐信
2013/10/31 职场文书
股东合作协议书范本
2014/04/14 职场文书
男女朋友协议书
2014/04/23 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
Python Matplotlib库实现画局部图
2021/11/17 Python