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游戏网-中文游戏门户站