码迷,mamicode.com
首页 > 其他好文 > 详细

实例:拖拽(面向对象)

时间:2017-04-26 22:01:51      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:back   拖拽   etl   osi   window   down   win   onload   tle   

<style>
  #div1 {width: 100px; height: 100px; background: red; position: absolute;};
</style>


<script>
  var oDiv = null;
  var disX = 0;
  var disY = 0;

  window.onload = function()
  {
    oDiv = document.getElementById(‘div1‘);

    oDiv.onmousedown = fnDown;
  };

  function fnDown(ev)
  {
    var oEvent = ev||event;
    disX = oEvent.clientX - oDiv.offsetLeft;
    disY = oEvent.clientY - oDiv.offsetTop;

    document.onmousemove = fnMove;

    document.onmouseup = fnUp;
  };

  function fnMove(ev)
  {
    var oEvent = ev||event;
    oDiv.style.left = oEvent.clientX-disX + ‘px‘;
    oDiv.style.top = oEvent.clientY-disY + ‘px‘;
  };

  function fnUp(ev)
  {
    document.onnousemove = null;
    document.onmouseup = null;
  };

</script>

<body>
  <div id="div1"></div>
</body>

实例:拖拽(面向对象)

标签:back   拖拽   etl   osi   window   down   win   onload   tle   

原文地址:http://www.cnblogs.com/shbkbj/p/6771241.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!