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