jquery自定义控件拖拽框dragbox

概述:

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

效果:

提供方法:

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 条评论
登录 后参与评论

相关文章

来自专栏一“技”之长

从AFNetworking源码分析到应用全解 原

    AFNetworking是iOS/OS开发中常用的一个第三方网络库,可以说它是目前最流行的网络库,但其代码结构其实并不复杂,也可以说非常简洁优美。在AF...

4923
来自专栏DannyHoo的专栏

iOS开发中利用AFNetworking进行断点下载

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

2433
来自专栏QQ音乐技术团队的专栏

React-Native 分包实践

对于很多在使用react-native开发应用的小伙伴们肯定都会遇到一个问题,功能越来越复杂,生成的jsbundle文件越来越大,无论是打包在app内发布还是走...

1.3K6
来自专栏DannyHoo的专栏

iOS开发中OC与JS交互(UIWebView)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

3903
来自专栏编程坑太多

『高级篇』docker之Mesos集群环境搭建(24)

PS: 所有的服务已经搭建,完毕,下一步就把之前写的6个微服务部署到我们的Mesos集群里面哈哈!

1156
来自专栏iOS Developer

Github源码推荐:(01.04):iOS开发蓝牙,启动动画,自定义Tabbar

1402
来自专栏iOS技术杂谈

iOS网络——AFNetworking AFURLSessionManager源码解析

你要知道的NSURLSession都在这里 转载请注明出处 https://cloud.tencent.com/developer/user/1605429 本...

4167
来自专栏Timhbw博客

NSURLSession与NSURLConnection区别

2017-05-0217:47:05 发表评论 425℃热度 使用现状 普通任务和上传 下载任务方式 请求方法的控制 断点续传的方式 配置信息 ...

3396
来自专栏陈满iOS

iOS开发·网络请求方法总结复习(NSURLConnection,NSURLSession,AFNetworking)

iOS的开发中的网络下载方式包括NSData(最原始,实际开发基本不会用),NSURLConnection(古老又过气的苹果原生网络框架),NSURLSessi...

2033
来自专栏落影的专栏

iOS开发-AFNetworking详解

这是一篇AFNetworking的详细解析 使用示例 新建一个AFHTTPSessionManager的manager,然后用manager请求对应网址的信息,...

3396

扫码关注云+社区

领取腾讯云代金券