专栏首页跟牛老师一起学WEBGISjquery自定义控件拖拽框dragbox

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

相关文章

  • Javascript+CSS实现影像卷帘效果

    用过Arcgis的筒子们对于Arcmap里面的一个卷帘效果肯定记忆很深刻,想把它搬到自己的WebGIS系统中去,抱着同样的想法,我也对这种比较炫的卷帘效果做了一...

    lzugis
  • CSS+JS实现图片集展示(续)

    上一篇文章里,我们实现了图片集的展示,在本文,对上一篇文章的内容作了封装,实现效果上作了一些优化,具体的思路我就不再赘述,下面将我的代码贴出来,以供搭建参考。

    lzugis
  • 共享个地图控件的样式

    源代码下载地址:http://download.csdn.net/detail/gisshixisheng/9008937

    lzugis
  • [- 贰 FFmpeg4.2.1 -] 解码decode-提取视频数据h264和YUV

    张风捷特烈
  • java晋级之路--如何成为高级工程师

    我虽然是软件工程专业,但是大学没学到啥东西,算是零基础了。找工作那会,就找了个培训班,简单学了下,极度勉强的情况下算是入门了。于是在北京开始寻找生涯中的第一份工...

    Java知音
  • 设计模式之UML类图的常见关系(一)

    本篇会讲解在UML类图中,常见几种关系: 泛化(Generalization),依赖(Dependency),关联(Association),聚合(Aggreg...

    跟着阿笨一起玩NET
  • Android开发之漫漫长途 Ⅳ——Activity的显示之ViewRootImpl初探

    该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列。该系列引用了《Android开发艺术探索...

    LoveWFan
  • 自适应丨Html5响应式(自适应)网页设计

    viewport是网页默认的宽度和高度, 上面这行代码的意思是:网页宽度默认等于屏幕宽度(width=device-width), 原始缩放比例(initia...

    V站CEO-西顾
  • Blender、Maya、C4D哪个最适合做3D动画?

    写在前面:关于哪个软件更容易学,其实把其中的一个学专学精了都会比较吃香,建议初学者先考虑清楚今后要从事的职业和发展方向,再有针对性的精修;

    Renderbus云渲染农场
  • new cloud-blockchain-book

    heidsoft

扫码关注云+社区

领取腾讯云代金券