jQuery拖拽
Posted 太阳你好 ☂
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery拖拽相关的知识，希望对你有一定的参考价值。
PC 端拖拽
function drag() {
var _move = false;
var _x, _y;
$(".drag").click(function() {
console.log($(".drag>g").css("display"));
}).mousedown(function(e) {
_move = true;
_x = e.pageX - parseInt($(".drag").css("left"));
_y = e.pageY - parseInt($(".drag").css("top"));
});
$(document).mousemove(function(e) {
if(_move) {
var x = e.pageX - _x;
var y = e.pageY - _y;
$(".drag").css({
top: y,
left: x
});
}
}).mouseup(function() {
_move = false;
});
}
手机 端拖拽
function drag(){
var _move=false;
var _x,_y;
var drag = document.getElementById(‘drag‘);
drag.addEventListener("touchstart",function(e){
var touch = event.targetTouches[0];
console.log(touch);
_move=true;
_x=touch.pageX-parseInt($("#drag").css("left"));
_y=touch.pageY-parseInt($("#drag").css("top"));
});
document.addEventListener("touchmove",function(e){
var touch = event.targetTouches[0];
if(_move){
var x=touch.pageX-_x;
var y=touch.pageY-_y;
$("#drag").css({top:y,left:x});
}
})
document.addEventListener("touchend",function(e){
_move=false;
});
}
以上是关于jQuery拖拽的主要内容，如果未能解决你的问题，请参考以下文章
jquery选择多个层一起拖拽，比如页面中有10个方块（div），任意选择多个，可以实现一起拖动
如何使用HTML5+CSS3+jquery 实现用户拖拽自定义界面