recherche

Maison >interface Web >js tutoriel >js implémente la fonction glisser-déposer

js implémente la fonction glisser-déposer

高洛峰
高洛峰original
2017-03-01 15:48:061173parcourir

Cet article présente principalement des exemples de js implémentant des effets glisser-déposer, qui ont une très bonne valeur de référence. Regardons-le avec l'éditeur ci-dessous

Rendu : (Le carré rouge peut. être traîné arbitrairement)

js implémente la fonction glisser-déposer

Le code est le suivant : 

 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>Document</title>
 <style type="text/css">
 *{
 margin:0;
 padding:0;
 }
 body{
 background:url("img/2345_image_file_copy_1.jpg");
 }
 #d1{
 width:100px;
 height:100px;
 background:red;
 margin-left:300px;
 }
 </style>
 </head>
 <body>
 <p id="d1"></p>
 </body>
 <script>
 window.onload=function(){
 var d1=document.getElementById("d1");
 d1.onmousedown=function(e){
 var mouseX=e.clientX;
 var mouseY=e.clientY;//计算xy
 var pianyiX=mouseX-d1.offsetLeft;
 var pianyiY=mouseY-d1.offsetTop;
 document.onmousemove=function(e){
 var newX=e.clientX-pianyiX;
 var newY=e.clientY-pianyiY;
 d1.style.marginLeft=newX+"px";
 d1.style.marginTop=newY+"px";
 }
 };
 document.onmouseup = function(e){
 document.onmousemove = null ;
 };
 }
 /*
 结果，上面的onmousemove要写在document上,我写在p上导致错误
 */
 </script>
</html>

Plus js pour implémenter la fonction glisser-déposer Pour les articles connexes, veuillez faire attention au site Web PHP chinois !

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：La fonction startWith dans js n'est compatible avec aucun navigateurArticle suivant：La fonction startWith dans js n'est compatible avec aucun navigateur

Articles Liés

Voir plus