zoukankan      html  css  js  c++  java
  • 可任意拖拽的div js 代码

    html部分:
    <div id="ktz"></div>

    css部分:
    #ktz{

    300px;
    height:300px;
    position:absolute;
    }

    js部分:
    var rDrag = {
           o:null,
           init:function(o){
            o.onmousedown = this.start;
           },
           start:function(e){
            var o;
            e = rDrag.fixEvent(e);
                         e.preventDefault && e.preventDefault();
                         rDrag.o = o = this;
            o.x = e.clientX - rDrag.o.offsetLeft;
                          o.y = e.clientY - rDrag.o.offsetTop;
            document.onmousemove = rDrag.move;
            document.onmouseup = rDrag.end;
           },
           move:function(e){
            e = rDrag.fixEvent(e);
            var oLeft,oTop;
            oLeft = e.clientX - rDrag.o.x;
            oTop = e.clientY - rDrag.o.y;
            rDrag.o.style.left = oLeft + 'px';
            rDrag.o.style.top = oTop + 'px';
           },
           end:function(e){
            e = rDrag.fixEvent(e);
            rDrag.o = document.onmousemove = document.onmouseup = null;
           },
          fixEvent: function(e){
              if (!e) {
                  e = window.event;
                  e.target = e.srcElement;
                  e.layerX = e.offsetX;
                  e.layerY = e.offsetY;
              }
              return e;
          }
      }
      window.onload = function(){
              var obj = document.getElementById('ktz');
       rDrag.init(obj);
      }

  • 相关阅读:
    FMDB 使用方法
    Masonry
    iOS请求服务器数据去空NSNull
    NSProgress
    根据图标名称动态设置TreeList图标
    控制显示行头列(Indicator)
    窗体内元素遍历-通用方法(DevExpress 中BarManager的遍历)
    BarManager相关使用
    C# 枚举变量
    dev TreeList 获取可视区域节点方法
  • 原文地址:https://www.cnblogs.com/ljx563884657/p/8066643.html
Copyright © 2011-2022 走看看