recherche

Maison  >  Article  >  interface Web  >  code js pour implémenter l'instance div en faisant glisser la souris

code js pour implémenter l'instance div en faisant glisser la souris

小云云
小云云original
2018-02-28 09:40:561703parcourir

Cet article partage principalement avec vous le code js pour implémenter des exemples div de glissement de souris. J'espère qu'il pourra aider tout le monde.

Téléchargez le code directement, simple et pratique. 

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title></title> <script type="text/javascript" src=&#39;./js/jquery-1.8.3.min.js&#39;></script> <style type="text/css">#ptest{    width: 200px;    height: 200px;    background: red;    position: absolute;/*这很关键*/
    left: 40%;    top:37%;}#ptest:active{    cursor: move;}</style></head><body><p id="ptest">来，拖拽我啊～</p><script type="text/javascript">var opTest = document.getElementById("ptest");
darg(opTest);function darg(obj){
    //鼠标按下 
    obj.onmousedown = function(ev){

       //IE直接用event或者window.event得到事件本身,而在其他浏览器函数要获取到事件本身需要从函数中传入
    　　var oevent = ev || event;

    　　var distanceX = oevent.clientX - this.offsetLeft;
    　　var distanceY = oevent.clientY - this.offsetTop;        //鼠标移动
    　　document.onmousemove = function(ev){
    　　　　var oevent = ev || event;
    　　　　obj.style.left = oevent.clientX - distanceX + &#39;px&#39;;
    　　　　obj.style.top = oevent.clientY - distanceY + &#39;px&#39;; 
    　　};        //鼠标放开
    　　document.onmouseup = function(){
    　　　　document.onmousemove = null;
    　　　　document.onmouseup = null;
    　　};
    };  
}</script></body></html>

Recommandations associées :

jQuery utilise l'effet de glisser pour obtenir un glissement libre div_jquery

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!

jquery JS
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：Partager des exemples de 5 façons d'implémenter l'héritage dans jsArticle suivant：Partager des exemples de 5 façons d'implémenter l'héritage dans js

Articles Liés

Voir plus