position属性必须设置为absolute,否则不起作用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../public/js/jquery-1.8.3.js"></script>
<script src="../public/js/jquery-ui-1.10.4.custom.js"></script>
<title>拖放功能</title>
<style type="text/css">
.drag{position:absolute;width:100px;height:100px;border:1px solid #ddd;background:#FBF2BD;text-align:center;padding:5px;top:100px;left:20px;cursor:move;}
</style>
<script type="text/javascript">
$(document).ready(function(){
var _move=false; //判断目标对象是否处于移动状态
var _x,_y; //鼠标离控件左上角的相对x、y的位置
$(".drag").click(function(){
}).mousedown(function(e){ //当按下鼠标左键时
_move=true; //将移动标记设为true
_x=e.pageX-parseInt($(".drag").css("left")); //得到左上角x的位置
_y=e.pageY-parseInt($(".drag").css("top")); //得到左上角y的位置
$(".drag").fadeTo(20,0.5); //单击后开始拖动并透明显示
})
$(document).mousemove(function(e){ //若开始移动鼠标且_move标记设置为true
if(_move){
var x=e.pageX-_x;
var y=e.pageY-_y;
$(".drag").css({top:y+'px',left:x+'px'}); //使用css设置控件的新位置
}
}).mouseup(function(){
_move=false;
$(".drag").fadeTo('fast',1); //松开鼠标后停止移动并恢复成不透明
});
});
</script>
</head>
<body>
<div class="drag">单击这里进行拖拽</div>
</body>
</html>
99
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
