zoukankan      html  css  js  c++  java
  • JS-JQ-拖拽

    拖拽的原理很简单

        1、第一步:需要基本的概念,需要这些事件:

        onmousedown()鼠标按下、

        onmousemove()鼠标移动、

        onmouseup()鼠标抬起、

       2、第二步:你需要了解事件的状态,也就是获取鼠标的位置:

      window.Event :代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

      oEvent.clientX:获取鼠标的横坐标

    !!!-  CSS

    <style>
      .div1{200px;height:200px;background:rosybrown;position:absolute;}
    </style>

    !!! - HTML

    <div class="div1"></div>

    !!! - JavaScript

    window.onload=function()
    {
      var div1=document.getElementsByClassName('div1')[0];
      var l=0;
      var t=0;
      div1.onmousedown=function(ev)
      {
        var oEvent=ev||event;
        var disX=oEvent.clientX-div1.offsetLeft;     
        var disY=oEvent.clientY-div1.offsetTop;

        document.onmousemove=function(ev)
        {
          var oEvent=ev||event;
          l=oEvent.clientX-disX;
          t=oEvent.clientY-disY;
          div1.style.left=l+"px";
          div1.style.top=t+"px";
        }
        document.onmouseup=function()
        {
          document.onmouseup=null;
          document.onmousemove=null;
        }
      }

    }

    !!! -  JQuery

    $(function(){
      var l=0;
      var t=0;
      $('.div1').mousedown(function(ev){
        var oEvent=ev||event;
        var disX=oEvent.clientX-$(this).offset().left;
        var disY=oEvent.clientY-$(this).offset().top;
        $(document).mousemove(function(ev){
          var oEvent=ev||event;
          l=oEvent.clientX-disX;
          t=oEvent.clientY-disY;
          $('.div1').css('left',l);
          $('.div1').css('top',t);
          console.log('移动');
        })
        $(document).mouseup(function(){
          $(document).off();
        })
      })
    })*/

  • 相关阅读:
    F广搜
    Python中range和xrange的异同之处
    数组中出现次数超过一半的数字
    iOS开发之剖析&quot;秘密&quot;App内容页面效果(一)
    Balloon Comes!
    scikit-learn: isotonic regression(保序回归,非常有意思,仅做知识点了解,但差点儿没用到过)
    C#数据缓存介绍及Caching通用帮助类整理
    SVN Working copying &#39;xxxxx/xxxx/xxxx&#39; locked
    读书笔记-APUE第三版-(7)进程环境
    UVA 10555
  • 原文地址:https://www.cnblogs.com/xiaoyangtian/p/7922065.html
Copyright © 2011-2022 走看看