<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
.drag{ position:absolute;
background:#0000CC;
padding:0;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.drag').mousedown(function (){
var patch=parseInt($(this).css("height"))/2; //鼠標相對目標元素的位置
$(document).mousemove(function (event){
var ox=event.clientX;
var oy=event.clientY;
var t=oy-patch;
var l=ox-patch;
var w=$(window).width()-$('.drag').width();
var h=$(window).height()-$('.drag').height();
if(t<0){
t=0;
}
else if(t>h){
t=h;
}
if(l<0){
l=0;
}
else if(l>w){
l=w;
}
$('.drag').css({top:t,left:l})
})
});
$(document).mouseup(function (){
$(this).unbind("mousemove");
});
});
</script>
</head>
<body>
<div class="drag">
123
</div>
</body>
</html>jquery實現div的拖拽效果
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章