注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

YUI 2.8 实现多个LI拖拽  

2011-01-08 14:04:15|  分类: Yui |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

先看一个YUI2.8的DD的例子

http://developer.yahoo.com/yui/examples/dragdrop/dd-reorder.html

这是一个很经典的拖拽的例子,它的最大的缺点是每次只能拖一个

下面是我对该例子的重写,让它支持多个拖拽。

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>


    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Multiple Drag and Drop</title>

<style type="text/css">
body {
    margin:10px;
    padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/fonts/fonts-min.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/selector/selector-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/dragdrop/dragdrop-min.js"></script>



<style type="text/css">

.multipleSelect{
      background:#F2AE1C;
}

.mylist {
    overflow-y:auto;
    float:left;
    position: relative;
    width: 350px;
    height:500px;
    background: #f7f7f7;
    border: 1px solid gray;
    list-style: none;
    margin:0;
    margin-left:15px;
    padding:0;
}

.mylist li{
    padding-left:10px;
    margin: 5px;
    cursor: pointer;
    zoom: 1;
    border:1px solid #7EA6B2;
    font-size:35px;
}

.drag {
    padding-left:10px;
    margin: 5px;
    cursor: pointer;
    zoom: 1;
    border:1px solid #7EA6B2;
    font-size:35px;
}
</style>



</head>

<body >


<h1>Multiple Drag and Drop </h1>


<div id="test">
   <ul >
    <li>item 0,1</li>
    <li>item 0,2</li>
    <li>item 0,3</li>
    <li>item 0,4</li>
    <li>item 0,5</li>
    <li>item 0,6</li>
  </ul>

  <ul >
    <li>item 1,1</li>
    <li>item 1,2</li>
    <li>item 1,3</li>
    <li>item 1,4</li>
    <li>item 1,5</li>
    <li>item 1,6</li>
  </ul>

  <ul >
    <li>item 2,1</li>
    <li>item 2,2</li>
    <li>item 2,3</li>
    <li>item 2,4</li>
    <li>item 2,5</li>
    <li>item 2,6</li>
  </ul>
</div>


<script>
var multipleDrag = function(ID){

var Dom = YAHOO.util.Dom;
var Event = YAHOO.util.Event;
var Selector = YAHOO.util.Selector;
var DDM = YAHOO.util.DragDropMgr;
var div = Dom.get(ID);
                
var DDApp = {
    init: function() {
        var uls = Selector.query("ul",div);
        for(var i in uls){
            new YAHOO.util.DDTarget(uls[i]);
        }

        var lis = Selector.query("ul li",div);
        for(var i in lis){
            new DDList(lis[i]);
        }
     }
};


var multipleSelect = function(){
    //对每个li注册click事件
    var lis = Selector.query('ul li',div);
    for(var i in lis){
        var li = lis[i];
        Event.addListener(li,'click',clickLi,li);
    }
}

var clickLi = function(e){
    //最关键的一步 确定shift 和 ctrl 是否被按住
    var bSHIFT = e.shiftKey;
    var bCTRL = e.ctrlKey;
    //如果ctrl 为 true
    if(bCTRL){
        Dom.addClass(this,'multipleSelect');
    }
    //如果shift 为 true
    if(bSHIFT){        
        
        Dom.addClass(this,'multipleSelect');
        
        var allNodes =  Selector.query('ul li',this.parent);
        
        var nodes = [];
        
        var nextSiblingNode = Dom.getNextSibling(this);
        
        while(nextSiblingNode){
            nodes.push(this);
            nodes.push(nextSiblingNode);
            if(Dom.hasClass(nextSiblingNode,'multipleSelect')){
                Dom.removeClass(allNodes,'multipleSelect');    
                Dom.addClass(nodes,'multipleSelect');
                return;
            }
            nextSiblingNode = Dom.getNextSibling(nextSiblingNode);
        }
    
        
        nodes = [];
        
        var previousSiblingNode = Dom.getPreviousSibling(this);
        
        while(previousSiblingNode){
            nodes.push(this);
            nodes.push(previousSiblingNode);
            if(Dom.hasClass(previousSiblingNode,'multipleSelect')){
                Dom.removeClass(allNodes,'multipleSelect');
                Dom.addClass(nodes,'multipleSelect');
                return;
            }
            previousSiblingNode = Dom.getPreviousSibling(previousSiblingNode);
        }
        
        
    }
    //shift 和 ctril 都为 false
    if((!bCTRL)&&(!bSHIFT)){
        Dom.removeClass(Selector.query('ul li',div),'multipleSelect');
        Dom.addClass(this,'multipleSelect');    
    }
}


var DDList = function(id, sGroup, config) {
    DDList.superclass.constructor.call(this, id, sGroup, config);
    var el = this.getDragEl();
    Dom.setStyle(el, "opacity", 0.67); // The proxy is slightly transparent
    this.lis = Selector.query("ul li",div);
    this.goingUp = false;
    this.lastY = 0;
};

YAHOO.extend(DDList, YAHOO.util.DDProxy, {

    
    startDrag: function(x, y) {
       
        var dragEl = this.getDragEl();
      
        if(!Dom.hasClass(this.getEl(),'multipleSelect')){
            Dom.removeClass(this.lis,'multipleSelect');  
            Dom.addClass(this.getEl(),'multipleSelect');
        }
       
        var selecteds = Selector.query('ul li.multipleSelect',div);
   
        Dom.setStyle(selecteds, "visibility", "hidden");
        
        var str = "";
        
        for(var i in selecteds){
            str +="<div >"+(selecteds[i].innerHTML).replace(/<[^>]*>/g,"&nbsp;")+"</div>";
        }
       
        dragEl.innerHTML = str ;
        Dom.setStyle(dragEl, "height",selecteds.length*50+"px");
        Dom.setStyle(dragEl, "backgroundColor","#F2AE1C");
        Dom.setStyle(dragEl, "border", "1px solid #8DC6EC");
    },

    endDrag: function(e) {
        
        if(!Dom.hasClass(this.getEl(),'multipleSelect')) return;

        var selecteds = YAHOO.util.Selector.query('ul li.multipleSelect',div);
        var proxy = this.getDragEl();

        for(var i in selecteds){
            var proxyid = proxy.id;
            var thisid = selecteds[i].id;
            Dom.setStyle(proxyid, "visibility", "hidden");
            Dom.setStyle(thisid, "visibility", "");
        }
    },

    onDragDrop: function(e, id) {

        if (DDM.interactionInfo.drop.length === 1) {
            var pt = DDM.interactionInfo.point;
            var region = DDM.interactionInfo.sourceRegion;
            
            if(!Dom.hasClass(this.getEl(),'multipleSelect')) return;
           
            var selecteds = YAHOO.util.Selector.query('ul li.multipleSelect',div);
           
            for(var i in selecteds){
                if (!region.intersect(pt)) {
                    var destEl = Dom.get(id);
                    var destDD = DDM.getDDById(id);
                    destEl.appendChild(selecteds[i]);
                    destDD.isEmpty = false;
                }    
                DDM.refreshCache();
            }

        }
    },

    onDrag: function(e) {

        var y = Event.getPageY(e);

        if (y < this.lastY) {
            this.goingUp = true;
        } else if (y > this.lastY) {
            this.goingUp = false;
        }

        this.lastY = y;
    },

    onDragOver: function(e, id) {
        
        if(!Dom.hasClass(this.getEl(),'multipleSelect')) return;

        var selecteds = YAHOO.util.Selector.query('ul li.multipleSelect',div);
       
        var destEl = Dom.get(id);
        for(var i in selecteds){

            var srcEl = selecteds[i];

            if (destEl.nodeName.toLowerCase() == "li") {
                
                var orig_p = srcEl.parentNode;
                var p = destEl.parentNode;
                if (this.goingUp) {
                    p.insertBefore(srcEl, destEl); // insert above
                } else {
                    p.insertBefore(srcEl, destEl.nextSibling); // insert below
                }

                DDM.refreshCache();
            }
        }
    }
});

Event.onDOMReady(multipleSelect);
Event.onDOMReady(DDApp.init,DDApp, true);
}

multipleDrag("test");
</script>
</body>
</html>

运行结果如图

  YUI 2.8 实现多个LI拖拽 - zhenghaoju700 - zhenghaoju700 的博客

 

可以直接拷贝代码,在浏览器中运行,

目前 我只在IE8和火狐3.6上测过没有问题

代码下载地址

http://download.csdn.net/user/hurry70

  评论这张
 
阅读(372)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017