实现flex布局下的拖拽

要求实现一个功能，是pdd一个对话框的可拖拽的插件。 网上借鉴了这篇文章fixed固定定位实现可拖拽 - 码农教程 (manongjc.com)； 自己修改了下代码，写脚本的插件是用的油猴，其中需要注意的是油猴插件使用jquery需要引用，如// @require cdn.bootcss.com/jquery/1.12…

直接上代码

 var gapX=0;
    var gapY=0;
    //鼠标按下后的事件
    function startDrag(event){
		var obj = event.srcElement ? event.srcElement : event.target;
		obj = $(obj);
		if(event.button==0){//判断是否点击鼠标左键
            console.log(0);
			let oldLeft = parseFloat($('div[data-testid=beast-core-modal-inner]').css("left"));
			let oldTop = parseFloat($('div[data-testid=beast-core-modal-inner]').css("top"));
			gapX=event.clientX + $(window).scrollLeft() - oldLeft ;
			gapY=event.clientY  + $(window).scrollTop() - oldTop ;


			//movemove事件必须绑定到$(document)上，鼠标移动是在整个屏幕上的
			$(document).bind("mousemove",move);
			$(document).bind("mouseup",stop);

		}
		return false;//阻止默认事件或冒泡
	}

	//鼠标拖动事件
	function move(event){
		$('div[data-testid=beast-core-modal-inner]').css({
			"left":(event.clientX-gapX)+"px",
			"top":(event.clientY-gapY)+"px"
		});

		return false;//阻止默认事件或冒泡
	}

	//鼠标停止事件
	function stop(){
		//解绑定，这一步很必要，前面有解释
		$(document).unbind("mousemove",move);
		$(document).unbind("mouseup",stop);
	}


	var drag2=function(obj){
		obj.bind("mousedown",startDrag);
	}
	console.log(document.querySelectorAll("a[data-tracking-id=V7_XhUotRKGRXhsc]"));


	var setIn = setInterval(function() {
				if($('.MDL_inner_ifhzkk')){

					drag2($('div[data-testid=beast-core-modal-inner] .MDL_header_ifhzkk'));
				}
			},1000); 

其中需要注意的是，原代码

gapX=event.clientX-obj.offset().left + $(window).scrollLeft();
gapY=event.clientY - obj.offset().top + $(window).scrollTop();  

这一块clientx，clienty主要是获取鼠标位置相对于页面的位置，然后用结束位置的x,y来计算移动的位置。offset().left，offset().left主要是获取要移动的块的位置。而$(window).scrollLeft()，$(window).scrollTop()则是防止有滑块的，我自己的代码不一样是因为我的flex块是相对于上层的父元素的，所以offset().left，offset().left用了当前块的left,top的css属