js实现拖动窗口

拿什么放在你手心

已于 2022-11-03 12:09:18 修改

阅读量449

点赞数

文章标签： javascript 前端开发语言

于 2022-11-03 11:07:02 首次发布

本文链接：https://blog.csdn.net/weixin_45303757/article/details/127666348

版权

$(document).ready(function() {
	//初始化添加监听-----重要，必须有
	document.getElementById("mingan-popver-tittle").addEventListener('mousedown', drag, false);
});

function drag(){
	dragElement3("要拖动的div的名字","这里写鼠标按下的标签名");
}

function dragElement3(chuangkouId,biaoqianId) {
	
	let title = document.querySelector("#"+biaoqianId);
	
	let addForm = document.querySelector("#"+chuangkouId);
	
	title.addEventListener("mousedown", function (e) {
	    let x = e.pageX - addForm.offsetLeft;
	    let y = e.pageY - addForm.offsetTop;
	
	    document.addEventListener("mousemove", move);
	    
	    function move(e) {
	        addForm.style.left = e.pageX - x + 'px';
	        addForm.style.top = e.pageY - y + 'px';
	    }
	
	    document.addEventListener("mouseup", function (e) {
	        document.removeEventListener("mousemove", move);
	    })
	});
}

按照以下顺序写，上面的方法不大行，第一次拖动不生效，第二次及以后的拖动可以正常动
$("要拖动的div的名字").show();
dragElement3("要拖动的div的名字","这里写鼠标按下的标签名");