var HTSDK = window.HTSDK || {};
HTSDK.infor={//拖拽dragAndDrop:function(){var _move=false;//鼠标离控件左上角的相对位置var _x,_y;$(".wTop").mousedown(function(e){_move = true;_x = e.pageX-parseInt($(".win").css("left"));_y = e.pageY-parseInt($(".win").css("top"));});$(document).mousemove(function(e){if(_move){var x = e.pageX-_x;//移动时鼠标位置计算控件左上角的绝对位置var y = e.pageY-_y;$(".win").css({top:y,left:x});//控件新位置}}).mouseup(function(){_move = false;});},//初始化拖拽div的位置initPosition:function(){//计算初始化位置var itop = ($(document).height()-$(".win").height())/2;var ileft = ($(document).width()-$(".win").width())/1.2;//设置被拖拽div的位置$(".win").css({top:itop,left:ileft});},//点击显示按钮clickShowBtn:function(){$("#show").click(function(){$(".win").show();});$("#hidden").click(function(){$(".win").hide();});},//入口init:function(){var _ts = this;_ts.clickShowBtn();_ts.initPosition();_ts.dragAndDrop();}};$(function(){HTSDK.infor.init();});HTML 结构<button id="show">显示</button>
<div class="win">
<div class="wTop"><p style=" cursor: pointer;float:right;margin:5px 5px 0px 0px;color:white" id="hidden">X</p></div>
<div class="content"></div>
</div>