jQuery拖放

最新推荐文章于 2025-05-16 11:40:08 发布

weixin_30252709

最新推荐文章于 2025-05-16 11:40:08 发布

阅读量137

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lishuaistart/p/9767880.html

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

css

#a1{
position: absolute;
}

html

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

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();

转载于:https://www.cnblogs.com/lishuaistart/p/9767880.html