html5 图片拖动效果,html5 图片拖动-优快云博客

本文介绍如何使用HTML5实现网页中图片的拖拽功能。通过JavaScript监听鼠标事件并计算图片位置，使得图片能够在限定区域内自由移动。适用于前端开发者学习交互式网页设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5 drag image in page - cheungmine

#_outerDiv{height:600px;width:100%;border:1px solid black;position:relative;overflow:hidden;

}

functiongetElem (id) {returndocument.getElementById(id); }functiontrimPX (_px) {if(_px==null ||_px=="")return 0;returnparseInt(_px.substr(0, _px.lastIndexOf("px"))); }functionhitInRect (hitX, hitY, rcLeft, rcTop, rcWidth, rcHeight) {return(hitX>=rcLeft&&hitX=rcTop&&hitY

varstartLeft= 0;vardragPosY= 0;vardragPosX= 0; window.addEventListener("load", initPage,false);functioninitPage () { outerDiv().addEventListener("mousedown",//start moving image

function(event) { startTop=trimPX(imageDiv().style.top); startLeft=trimPX(imageDiv().style.left);varwidth=trimPX(imageDiv().style.width);varheight=trimPX(imageDiv().style.height);if(hitInRect(event.clientX, event.clientY, startLeft, startTop, width, height)) { dragging= true; dragPosX=event.clientX; dragPosY=event.clientY; event.preventDefault();//disable default behavior of browser

} },false); outerDiv().addEventListener("mousemove",//moving image

function(event) {if(dragging){ imageDiv().style.cursor="pointer"; imageDiv().style.top=parseInt(startTop)+(event.clientY-dragPosY)+ "px"; imageDiv().style.left=parseInt(startLeft)+(event.clientX-dragPosX)+ "px"; } event.preventDefault(); },false); outerDiv().addEventListener("mouseup",//stop moving image

function(event) { dragging= false; imageDiv().style.cursor="default"; event.preventDefault(); },false); }