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>
转载于:https://www.cnblogs.com/zengcanxin/p/5269572.html