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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2015年05月30日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
