मूसडाउन, माउसअप और माउसमूव जैसी घटनाओं की मदद से, हम छवि का अनुवाद कर सकते हैं जिससे ड्रैग इफेक्ट पैदा होता है।
निम्नलिखित उदाहरण दर्शाता है कि कैसे एक छवि को jQuery का उपयोग करके स्थानांतरित किया जा सकता है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
#parent{
position: absolute;
margin: 20px;
width: 200px;
height: 200px;
border-radius: 25px;
background-color: khaki;
}
#mover {
position: relative;
margin: 10px;
}
</style>
</head>
<body>
<div id=parent>
<img id="mover" src="https://images.unsplash.com/photo-1613333238609-
ef9218f3ddbd?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=100&ixlib=rb1.2.1&q=80&w=100" />
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
let ele = {startPositionX:0,startPositionY:0};
let disp = {x:0,y:0};
$('#parent').on("mousedown",function(e){
let container = $(this);
ele.startPositionX=e.pageX-disp.x;
ele.startPositionY=e.pageY-disp.y;
$(document).on("mousemove",function(e){
disp.x=e.pageX-ele.startPositionX;
disp.y=e.pageY-ele.startPositionY;
$('#mover').css('transform','scale('+1.0+') translate('+disp.x+'px, '+disp.y+'px)');
});
});
$(document).on("mouseup",function(){
$(this).off("mousemove");
});
</script>
</body>
</html> आउटपुट
यह निम्नलिखित परिणाम देगा -
खींचें
