jquery设置图片可手动拖拽

JQuery是一款流行的JavaScript框架，可以轻松实现网页交互效果。而其中一种常见效果是图片手动拖拽。以下是设置图片手动拖拽的JQuery代码。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

$(document).ready(function() { var isDragging = false; var mousePos = { x: 0, y: 0 }; var elemPos = { x: 0, y: 0 }; var $elem = $(".drag-image"); $elem.mousedown(function(event) { isDragging = true; mousePos.x = event.pageX; mousePos.y = event.pageY; elemPos.x = $elem.offset().left; elemPos.y = $elem.offset().top; }); $(document).mousemove(function(event) { if (isDragging) { var dx = event.pageX - mousePos.x; var dy = event.pageY - mousePos.y; $elem.offset({ left: elemPos.x + dx, top: elemPos.y + dy }); } }); $(document).mouseup(function() { isDragging = false; }); });

　　

代码解释：

首先在文档准备就绪时声明变量。isDragging用于判断是否在拖拽状态，mousePos记录鼠标的坐标，elemPos记录需要移动的元素的坐标，$elem是需要进行拖拽的元素。鼠标按下时，设置isDragging为true，并记录鼠标的位置和需要移动的元素的位置。当鼠标移动时，计算出移动的距离，并设置元素的位置。当鼠标抬起时，设置isDragging为false。

需要注意的是，该代码仅适用于鼠标拖拽，对于移动端需进行修改。

演示地址：9335游戏网-中文游戏门户站