Le contenu de cet article explique comment implémenter des événements glisser-déposer (code) dans du js natif. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width:200px;
height:200px;
background-color: red;
position: absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<p class='box'></p>
<script>
var box = document.querySelector('.box');
box.onmousedown = function(e){
var event = e || window.event;
var target = event.target || event.srcElement;
var disX = event.clientX - target.offsetLeft;
var disY = event.clientY - target.offsetTop;
document.onmousemove = function(event){
// 注意：这里要有自己的事件对象
target.style.left = event.clientX - disX + 'px';
target.style.top = event.clientY - disY + 'px';
document.onmouseup = function(){
document.onmousedown = null;
document.onmousemove = null;
}
}
}
</script>
</body>
</html>Recommandations associées :
js contrôle le glissement du fichier et obtient le code d'implémentation du contenu du glisser
js est simple Compétences drag_javascript de table
JS natif pour obtenir des compétences de glisser-déposer d'effet d'image_javascript
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Utilisations courantes de l'ensemble
Comment utiliser la fonction d'impression en python
Quel est le système qad ?
Utilisation de la fonction gettickcount
touches de raccourci de remplacement wps
Comment résoudre le problème du démarrage lent de l'ordinateur
Quel format de fichier est csv ?
locallapstore
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
