jquery-简单拖拽代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>

<style>
.circle{width: 100px; height: 100px; background: red; position: absolute; border-radius:50px;}
</style>
<script src='../jquery-3.1.1.min.js'></script>
<script>
$(function(){
var disX=0;
var disY=0;
$('div').mousedown(function(ev){

disX=ev.pageX-$(this).offset().left;
disY=ev.pageY-$(this).offset().top;
$(document).mousemove(function(ev){
$('div').css('left', ev.pageX-disX);
$('div').css('top', ev.pageY-disY);

});
$(document).mouseup(function(){
$(document).off();
});
return false;
});
});
</script>
</head>
<body>
<div class="circle">
</div>

</body>
</html>

posted @ 2016-12-09 20:50  distant-遥远  阅读(103)  评论(0编辑  收藏  举报