jquery自定义控件拖拽框dragbox

来源：互联网发布：酱紫的网络语言意思编辑：程序博客网时间：2024/06/06 12:35

概述：

在做项目的过程中遇到了拖拽框的使用，虽然网上有很多类似的插件，但总归不如自己的好使，于是就自己写了一个，在此总结下来，以便后用。

效果：

提供方法：

setTitle(title)：设置标题；

setContent(content)：设置内容；

setsize(width, height)：设置大小；

hide()：隐藏；

show()：显示；

使用方法：

创建对象

            var dragbox = $("#dragbox").DragBox({                title:"拖拽的框子",                content:"拖拽的框子",                width:200,                height:100            });

调用方法

dragbox.setSize(250,200);var content = $("<h1 />").html("我是中国人！");dragbox.setContent(content);dragbox.show();

代码：

style.css

body,html,.dragbox{    font-size: 12px;}.dragbox .close{    float: right;    margin: 10px 8px;    width: 10px;    height: 10px;    background: url("img/iw_close.gif") no-repeat;}.dragbox .close:hover{    cursor: pointer;}.dragbox .title{    border: 1px solid #bbbbbb;    padding:7px 10px;    font-weight:bold ;}.dragbox .content{    border: 1px solid #bbbbbb;    border-top: none;    padding: 7px 10px;    box-shadow: 1px 1px 1px #dddddd;}

jquery.custom.dragbox.js

(function($){    $.fn.DragBox = function(options){        var defaults = {            title:"dragbox",            content:"dragbox",            width:200,            height:100        };        var options = $.extend(defaults,options);        var _title = options.title;        var _content = options.content;        var _width = options.width,  _height = options.height;        var _dragBox = $(this);        _dragBox.css("width",_width+"px").addClass("dragbox");        var _close = $("<div />").appendTo(_dragBox).addClass("dragbox close");        var _titleBox = $("<div />").appendTo(_dragBox).addClass("dragbox title").html(_title);        var _contentBox = $("<div />").appendTo(_dragBox).addClass("dragbox content").css("height",_height+"px").append(_content);        var _x,_y;        var _flag = false;        _titleBox.on("mousedown",function(e){            _flag = true;            _titleBox.css("cursor","move");            _x= e.pageX - parseInt(_dragBox.css("left"));            _y= e.pageY - parseInt(_dragBox.css("top"));            var docWidth = $(document).width(),docHeight = $(document).height();            var boxWidth = _dragBox.width(),boxHeight = _dragBox.height();            $(document).on("mousemove",function(e){                if(_flag){                    var x = e.pageX-_x,y = e.pageY-_y;                    _dragBox.css({"left":x+"px","top":y+"px"});                }            });            $(document).on("mouseup",function(e){                _flag = false;                _titleBox.css("cursor","default");            });        })        _close.on("click",function(){            _dragBox.fadeOut();        })        function show(){            _dragBox.fadeIn();        }        function hide(){            _close.click();        }        function setTitle(title){            _titleBox.html(title);        }        function setContent(content){            _contentBox.html(content);        }        function setSize(width,height){            _dragBox.css("width",width+"px");            _contentBox.css("height",height+"px");        }        this.show = show;        this.hide = hide;        this.setTitle = setTitle;        this.setContent = setContent;        this.setSize = setSize;        return this;    }})(jQuery);

调用代码：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" href="css/style.css" type="text/css">    <style>        #dragbox{            position: absolute;            top:50px;            left: 50px;        }    </style>    <script src="http://localhost/jquery/jquery-1.8.3.js"></script>    <script src="js/jquery.custom.dragbox.js"></script>    <script>        $(function(){            var dragbox = $("#dragbox").DragBox({                title:"拖拽的框子",                content:"拖拽的框子",                width:200,                height:100            });            $("#show").on("click",function(){                dragbox.setSize(250,200);                var content = $("<h1 />").html("我是中国人！");                dragbox.setContent(content);                dragbox.show();            })        });    </script></head><body><button id="show">显示拖拽框</button><div id="dragbox"></div></body></html>

0 0