zoukankan      html  css  js  c++  java
  • 拖放的实现步骤

    <style type="text/css">
    div{
    100px;
    height: 100px;
    background: green;
    border-radius: 50px;
    }
    </style>

    <body>
    <div id="div1" style="/position: absolute;top:200px;left: 200px;"></div>
    </body>
    <script type="text/javascript">
    var div1=document.getElementById("div1");
    //鼠标按下
    div1.onmousedown=function (e){
    var ev=e||window.event;
    var cliX=ev.clientX-parseInt(div1.style.left);//让鼠标在div之上
    var cliY=ev.clientY-parseInt(div1.style.top);
    //鼠标移动
    div1.onmousemove=function(e){
    var ev=e||window.event;
    div1.style.left=ev.clientX-cliX+"px";//鼠标移动,跟着动
    div1.style.top=ev.clientY-cliY+"px";
    }
    //鼠标弹起
    div1.onmouseup=function(){
    div1.onmousemove=null;
    }
    //鼠标移开
    div1.onmouseout= function () {
    div1.onmousemove=null;
    }
    }


    </script>

  • 相关阅读:
    排座椅
    关于math.h的问题
    客户调查
    排队打水
    删数游戏
    小数背包
    零件分组
    桐桐的组合
    桐桐的数学游戏
    桐桐的全排列
  • 原文地址:https://www.cnblogs.com/1039595699TY/p/5515917.html
Copyright © 2011-2022 走看看