<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-color: #fff;
}
#imgMove{
outline:1px solid #F00;
width:500px;
height:500px;
overflow:hidden;
position:absolute;
-webkit-user-select: none;
-moz-user-select:none ;
-ms-user-select: none;
user-select:none ;
}
#moved{
-webkit-user-select: none;
-moz-user-select:none ;
-ms-user-select: none;
user-select:none ;
position:absolute;
left:0;
top:0;
}
#imgMove:active{
cursor:move;
}
svg {
height: 900px;
width: 900px;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="imgMove">
<div id="moved" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
<path fill="#1A374D" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
<path d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
</svg></div>
</div>
<script>
var imgMover = {press: false, offX:0, offY:0,x0:0,y0:0,x1:0,y1:0};
$("#imgMove").bind("mousedown",function(e){
imgMover.x0 = e.clientX;
imgMover.y0 = e.clientY;
imgMover.press = true;
e.preventDefault();
});
$(window).bind("mousemove",function(e){
if(!imgMover.press)
return false;
imgMover.x1 = imgMover.x0;
imgMover.y1 = imgMover.y0;
imgMover.x0 = e.clientX;
imgMover.y0 = e.clientY;
var offx = parseInt($("#moved").position().left) + parseInt(imgMover.x0 - imgMover.x1);
var offy = parseInt($("#moved").position().top) + parseInt(imgMover.y0 - imgMover.y1);
$("#moved").css({
"left": offx,
"top": offy
});
if($("#moved").position().top>0)
$("#moved").css({"top":0});
if($("#moved").position().left>0)
$("#moved").css({"left":0});
if($("#moved").position().top < -($("#moved").height() - $("#imgMove").height()))
$("#moved").css({"top":-($("#moved").height() - $("#imgMove").height())});
if($("#moved").position().left < -($("#moved").width() - $("#imgMove").width()))
$("#moved").css({"left":-($("#moved").width() - $("#imgMove").width())});
});
$(window).bind("mouseup",function(){
imgMover.press = false;
});
</script>
</body>
</html>
|