分析：
我们想拖着小箱子移动。 首先，我知道以下信息。 在小箱子上单击鼠标可获得鼠标坐标(e.pageX、e.pageY )、大箱子的offsetLeft和offsetTop以及小箱子的offsetLeft和offsetTop。 移动鼠标时，其中的鼠标在小箱子内的坐标(设为x，y )被固定，大箱子也被固定。 新的pageX - X -使用大箱子offsetLeft，可以得到小箱子offsetLeft，即小箱子向左浮动的距离。
鼠标小盒中的x坐标=e.pageX -大盒. offsetLeft -小盒. offsetLeft；
同样，
鼠标小盒中的y坐标=e.pageY -大盒. offsetTop -小盒. offsetTop；
首先，构建HTML骨架和CSS样式。
请将body section h3头部移动到适当的位置/H3 divclass=' images ' img src=' images/无头亚瑟. jpg ' alt=' pudding ' draggable=' false ' height亚瑟. jpg ' alt=' head ' draggable=' false ' height=' left: 0； top: 0； cursor: move； } /style JavaScript代码：
脚本窗口.高级监听器(load )，function ) varH3=document.queryselector ) ) H3 )； var large=document.query selector ('.images )； var head=document.query selector (img [ alt=' head ' ] )； head.addevent listener (' mousedown '，function(e )//鼠标缩略图中的坐标varheadleft=e.pagex-large.offsetleft-head functionfn(e )//新鼠标坐标-鼠标是小盒坐标-大盒offset=小盒浮动值varx=e.pagex-head left-large.offsetleft； vary=e.pagey-head top-large.offsettop； head.style.left=X 'px '； head.style.top=Y 'px '； //添加移动事件document.addevent listener (' mousemove '，fn )； document.addevent listener (' mouseup '，function ) )//确定是否已移动到指定位置。 这里误差为10 pxif (head.offsetleft 240 head.offsetleft 250 head )；H3.style.background color=' sky blue '； } else { h3.innerHTML='你是不是错了'； H3.style.background color=' brown '； //弹出鼠标删除事件document.removeeventlistener (' mousemove '，fn )； )； )； )； /script images文件夹下使用的图像：
百度云盘链接： https://pan.Baidu.com/s/19 ipghjwarvudtjab-omc9q
引出导线： 0bt6