mootools位置切换类

最新推荐文章于 2024-09-14 10:16:29 发布

zhangw428

最新推荐文章于 2024-09-14 10:16:29 发布

阅读量669

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： mootools function transition callback class api

本文链接：https://blog.youkuaiyun.com/zhangw428/article/details/2988025

javascript 专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的模块拖拽排序功能，通过创建一个名为posSwitch的类来控制元素的上下移动，并实现平滑过渡效果。该功能还包括模块顺序的记录与保存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

测试地址： http://6.cn/user/myspace.php

 var posSwitch = new Class({
    options :{
        api : 'http://6.cn/6cntest/p/h.html',  //待定
        transition : {duration: 1000,transition: Fx.Transitions.Cubic.easeOut}  
    },
    
    initialize:function(parentId,boxClass,options){
        
        this.setOptions(options);
        this.idArr = [];                 //模块顺序的数组(发送到php端保存的数组) 
        this.parentId = parentId;        //模块的总父容器  
        this.boxClass = boxClass;        //模块的class 
        this.boxs = $$('#' + this.parentId + ' div.'+ this.boxClass);      //排序的模块数组 
        this.num = this.boxs.length; 
        if(this.num == 0) return;                                     // 排序的模块个数 
        for(var i=0; i<this.num; i++){
            var box = this.boxs[i]
           this.idArr.push(box.id);
        }
        $$('#'+this.boxs[0].id + ' p')[0].addClass('top');
        $$('#'+this.boxs[this.num-1].id + ' p')[0].addClass('bottom');
        var uplinks = $$('#' + this.parentId + ' a.up');
        var downlinks = $$('#'+ this.parentId + ' a.down');
        uplinks.each(function(ele){
            ele.addEvent('click',function(event){event.stop();this.switUp(ele)}.bindWithEvent(this))
            }.bind(this)
         )
        downlinks.each(function(ele){
            ele.addEvent('click',function(event){event.stop();this.switDown(ele)}.bindWithEvent(this))
            }.bind(this)
         )
    },
    
    switDown : function(ele){
        var thisObj = $(ele.parentNode.parentNode);
        var thisIndex = this.idArr.indexOf(thisObj.id);
        var thatObj = $(this.idArr[thisIndex+1]);
        this.idArr[thisIndex] = thatObj.id;
        this.idArr[thisIndex+1] = thisObj.id;
        
        var thisTop = thisObj.getStyle('top') == 'auto' ? 0 : thisObj.getStyle('top').toInt();
        var thatTop = thatObj.getStyle('top') == 'auto' ? 0 : thatObj.getStyle('top').toInt();
        var thisHeight = thisObj.getStyle('height').toInt();    // 块高 
        var thatHeight = thatObj.getStyle('height').toInt();
        var e = new Fx.Styles(thisObj, this.options.transition);
        e.start({'top':[thisTop,thisTop+thatHeight],'opacity':[0.5,1]});
        var f = new Fx.Styles(thatObj, this.options.transition);
        f.start({'top':[thatTop, thatTop-thisHeight],'opacity':[0.5,1]});
        this.arrowChange();
    },
    
    switUp : function(ele){
        var thisObj = $(ele.parentNode.parentNode);
        var thisIndex = this.idArr.indexOf(thisObj.id);
        var thatObj = $(this.idArr[thisIndex-1]);
        this.idArr[thisIndex] = thatObj.id;
        this.idArr[thisIndex-1] = thisObj.id;
        
        var thisTop = thisObj.getStyle('top') == 'auto' ? 0 : thisObj.getStyle('top').toInt();
        var thatTop = thatObj.getStyle('top') == 'auto' ? 0 : thatObj.getStyle('top').toInt();
        var thisHeight = thisObj.getStyle('height').toInt();    // 块高 
        var thatHeight = thatObj.getStyle('height').toInt();
        var e = new Fx.Styles(thisObj, this.options.transition);
        e.start({'top':[thisTop,thisTop-thatHeight],'opacity':[0.5,1]});
        var f = new Fx.Styles(thatObj, this.options.transition);
        f.start({'top':[thatTop, thatTop+thisHeight],'opacity':[0.5,1]});
        this.arrowChange();
       
    },
    
    arrowChange:function(){
        var links = $$('#'+ this.parentId + ' a.down, a.up');
        for(var i=0;i<links.length;i++){
           $(links[i].parentNode).removeClass('top').removeClass('bottom');
        }
        $$('#'+this.idArr[0] + ' p')[0].addClass('top');
        $$('#'+this.idArr[this.num-1] + ' p')[0].addClass('bottom');
    
    },
    
    save : function(){
        var url = this.options.api;
        var data = 'order='+ this.idArr + '&uid=' + pageMessage.uid;
        var callback = this.back.bind(this);
        alert(data);
        Request.reSend(url,data,callback);
    },
    
    back :function(httpobj){
        
    }
})
posSwitch.implement(new Events, new Options);
window.addEvent('load', function(){
     mySwitch = new posSwitch('scrollWrap','myPanelBox');
})