<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function(){
obj=$(".d1");
drag(obj);
function drag(obj){
obj.on("mousedown",start);
function start(event){
x=event.clientX-obj.offset().left;
y=event.clientY-obj.offset().top;
$(this).css({
"cursor":"move"
})
$(document).on("mousemove",move);
obj.on("mouseup",stop);
return false;
}
function move(event){
obj.css({
"left":(event.clientX-x)+"px",
"top":(event.clientY-y)+"px",
})
return false;
}
function stop(){
$(this).css({
"cursor":"default"
})
$(document).off("mousedown");
$(document).off("mousemove");
}
}
})
</script>
<style>
.d1{
width: 256px;
height: 256px;
background: #ADD8E6;
border-radius:50% ;
position: absolute;
}
</style>
</head>
<body>
<div class="d1">
<img src="img/0.png" />
</div>
</body>
</html>
jQuery元素（图片）拖拽代码
猜你喜欢
转载自blog.csdn.net/June_R/article/details/85341457
今日推荐
周排行