可拖动的div

最新推荐文章于 2023-03-20 10:29:37 发布

huangfeng1982712

最新推荐文章于 2023-03-20 10:29:37 发布

阅读量710

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/huangfeng1982712/article/details/2244794

为了以后方便自己使用，所以先记录起来，方便以后的使用和重构
此js是基于prototype和scriptaculous的扩展
var DragDiv={};
DragDiv.Base=Class.create();;
DragDiv.Base.prototype={
    initialize:function(element,closeElement,showElement,options){
       //要实现拖动的div
        this.element=$(element);
       //掩藏此div的按钮
        this.closeElement=$(closeElement);
       //呼出此div的控件
        this.showElement=$(showElement);
        if(this.setOptions){
            setOptions(options);
        }else{
            this.options=options||{};
        }
        this.options.handle=this.options.handle||this.element;
       //此div的宽
        this.options.width=this.options.width||'400px';
       //此div的高
        this.options.height=this.options.height||'400px';
        this.element.style.width=this.options.width;
        this.element.style.height=this.options.height;
        new Draggable(element, {
        handle:this.options.handle,
        zindex: 999,
        scroll: true
        });
        Event.observe(this.closeElement,'click',this.closeDiv.bindAsEventListener(this));
        Event.observe(this.showElement,'click',this.showDiv.bindAsEventListener(this));
    },
    closeDiv:function(){
        if(this.element.style.display=='block'||this.element.style.display==""){
            this.element.style.display='none';
        }
    },
    showDiv:function(){
        if(this.element.style.display!='block'){
            this.element.style.display='block';
        }
    }
}