Dieser Artikel teilt Ihnen den Code zur einfachen Implementierung des JS-Drag-Effekts mit, der mithilfe des mobilen Attributs von Trnsform von CSS3 implementiert wird. Freunde in Not können sich den Inhalt dieses Artikels ansehen
Erreicht durch Verwendung des mobilen Attributs von CSS3 Trnsform.
Der Code lautet wie folgt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#dom{
width: 50px;
height: 50px;
border: 2px solid red;
}
</style>
</head>
<body>
<p id="dom"></p>
<script>
(function(){
let dom = document.getElementById('dom');
let moveX,moveY
dom.addEventListener('mousedown',function (e) {
moveX=e.target.offsetWidth;
moveY=e.target.offsetHeight
console.log(e);
document.addEventListener('mousemove',move,false)
})
function move(e){
if(moveY&& moveY){
let width =moveX/2,height = width+moveY;
dom.style.transform='translate('+(e.x-width)+'px,'+(e.y-height)+'px)'
}
}
document.addEventListener('mousemove',move,false)
document.addEventListener('mouseup',function (e) {
let width =moveX/2,height = width+moveY;
let i =(e.x-width) +'px',y=(e.y-height)+'px';
if(moveX && moveY){
document.removeEventListener('mousemove',move,false);
dom.style.transform='translate('+i+','+y+')';
moveY='',moveX=''
}
})
})()
</script>
</body>
</html>Verwandte Empfehlungen:
Einfache Implementierung des JSP-Paging-Anzeigeeffekts
So implementieren Sie die Bildkomprimierungsmethode in JS
So implementieren Sie die exquisite automatische Currying-Funktion in JS
Das obige ist der detaillierte Inhalt vonEinfache Implementierung des JS-Drag-Effekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
