jquery自訂控制項拖拽框dragbox，jquerydragbox
概述：
在做項目的過程中遇到了拖拽框的使用，雖然網上有很多類似的外掛程式，但總歸不如自己的好使，於是就自己寫了一個，在此總結下來，以便後用。
效果：
提供方法：
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;}
(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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
