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();
        })
      })
    })*/

  • 相关阅读:
    【网络攻击】之防止短信验证码接口被攻击
    【支付专区】之检查微信预下单返回结果
    【mybatis】之批量添加
    【java】之转码
    【springmvc】之常用的注解
    数字信号处理MATLAB简单序列
    matlab中同一文件定义子函数的方法
    MATLAB 单变量函数一阶及N阶求导
    Android 学习笔记1
    java socket tcp(服务器循环检测)
  • 原文地址:https://www.cnblogs.com/xiaoyangtian/p/7922065.html
Copyright © 2011-2022 走看看