实现了简单的拖拽效果,没有加边界判断。
//拖动弹窗
/**
*
* @param {*} downDiv 将鼠标移入时显示移动图标的元素
* @param {*} moveDiv 移动的元素
*/
function dragPanelMove(downDiv,moveDiv){
$(downDiv)[0].style.cursor = 'move';
var moveValue = {};
$(downDiv).mousedown(function (e) {
var isMove = true;
//获得鼠标偏移量
moveValue.left = e.pageX;
moveValue.top = e.pageY;
moveValue.oldPositionX =$(moveDiv).position().left;
moveValue.oldPositionY = $(moveDiv).position().top;
$(document).mousemove(function (e) {
if (isMove) {
//新的偏移位置
moveValue.newleft = e.pageX;
moveValue.newtop = e.pageY;
//偏移量
moveValue.x = moveValue.newleft - moveValue.left;
moveValue.y = moveValue.newtop - moveValue.top;
//新的位置
moveValue.newPositionX = moveValue.oldPositionX + moveValue.x;
moveValue.newPositionY = moveValue.oldPositionY + moveValue.y;
$(moveDiv).css({
left: moveValue.newPositionX + "px",
top: moveValue.newPositionY + "px",
});
}
}).mouseup(
function () {
//解除绑定
isMove = false;
});
});
}