jQuery拖放

该方法为最简单的拖放方法,基于jQuery。

css

#a1{
position: absolute;
}

html

<div style="width: 100px;height: 100px;background: #000" id="a1"></div>

js

function drag() {
var obj = $('#a1');
obj.bind('mousedown', start);
function start(e) {
var ol = obj.offset().left;
var ot = obj.offset().top;
deltaX = e.pageX - ol;
deltaY = e.pageY - ot;
$(document).bind({
'mousemove': move,
'mouseup': stop
});
return false;
}
function move(e) {
obj.css({
"left": (e.pageX - deltaX),
"top": (e.pageY - deltaY)
});
return false;
}
function stop() {
$(document).unbind({
'mousemove': move,
'mouseup': stop
});
}
}
drag();

 

猜你喜欢

转载自www.cnblogs.com/lishuaistart/p/9767880.html