拖拽 DIV 效果

来源:互联网 发布:ubuntu 16.04 中文字体 编辑:程序博客网 时间:2024/03/30 00:00
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.8.3.min.js" charset="utf-8"></script>
<title>jsmartdrag实例页面</title>
<style type="text/css">
  #ul{
    width: 330px;
    height: 340px;
    position: relative;
    list-style: none;
    padding: 0
  }
  li{
    float: left;
    width: 100px;
    height: 100px;
    margin:10px 10px 0 0;
    background: red;
    text-align: center;
    list-style: none;
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 100px;
    -webkit-user-select:none;
    -moz-user-select: none;
    user-select: none;
    -khtml-user-select: none; 


  }
  li:nth-child(2){
    background: blue;
  }li:nth-child(3){
    background: black;
  }li:nth-child(4){
    background: yellow;
    color: #000;
  }li:nth-child(5){
    background: green;
  }
  li:nth-child(6){
    background: gray;
  }


  .down_class{
    opacity: .7;
    position: absolute;
    cursor:move;
  }
  .a{
    visibility: hidden;
  }
</style>
</head>
<body>
<ul id="ul">


  <li>
    我是1号
  </li>
  <li>
    我是2号
  </li>
  <li>
    我是3号
  </li>
  <li>
    我是4号
  </li>
  <li>
    我是5号
  </li>
  <li>
    我是6号
  </li>
  <li>
    我是7号
  </li>
  <!-- <li class="a">2344</li> -->
</ul>






<script type="text/javascript">
  var drag = function(opt) {
            this.options = $.extend({
              fdom : "#ul",
              margin:10,
              callback:$.noop()
            },opt || {})
            this.init();
        }
    drag.prototype = {
        init :function(e){
          this.dragdown = false;
          this.fdom = $(this.options.fdom);
          this.dom = this.fdom.find("li");
          this.dw  = this.dom.width()/2;
          this.dh  = this.dom.height()/2;
          this.mr  = this.options.margin;
          this.l   = this.dom.length;
          this.index;
          this.pageY;
          this.pageX;
          this.X = 0;
          this.Y = 0;
          this.larry = [];
          this.minX = this.fdom.offset().left;
          this.minY = this.fdom.offset().top;
          this.maxX = this.fdom.width() - this.dw*2;
          this.maxY = this.fdom.height() - this.dh*2;
          this.farry = [this.minX,this.minY,this.maxX,this.maxY];
          this.domdiff();
          this.mousedown();
        },
        domdiff:function(e){
          var self = this;
          self.dom.each(function(i){
              this.minX = $(this).offset().left;
              this.minY = $(this).offset().top;
              this.maxX = $(this).offset().left + self.dw*2;
              this.maxY = $(this).offset().top + self.dh*2;
              self.larry[i]  = { 
                left : this.minX , 
                top : this.minY ,
                mleft:this.maxX,
                mtop:this.maxY
              }


          })
        },
        mousedown:function(e){
          var self = this;
          self.dom.mousedown(function(){ 
            self.dragdown = true; 
            var e = event || window.event;
            var pageX = e.pageX || e.clientX;
            var pageY = e.pageY || e.clientY;
            self.X = pageX - self.farry[0]-self.dw;
            self.Y = pageY - self.farry[1]-self.dh;
            $(this).addClass("down_class").css({
                left:self.X,
                top:self.Y
            }); 
            self.mousemove($(this));
            
          }); 
        },
        mousemove:function(dom){
          var self = this;
            dom.mousemove(function(){ 
              var e = event || window.event;
              self.pageX = e.pageX || e.clientX;
              self.pageY = e.pageY || e.clientY;
              if(self.dragdown){
                self.mouseleave(dom);
                self.X = self.pageX - self.farry[0] - self.dw;
                self.Y = self.pageY - self.farry[1] - self.dh;
                if(e.clientX - self.dw< self.farry[0])
                {
                    self.X= 0;
                }
                if(e.clientX - self.dw > self.farry[2])
                {
                    self.X= self.farry[2]- self.mr;
                }
                if(e.clientY  - self.dh< self.farry[1])
                {
                    self.Y= 0
                }
                if(e.clientY - self.dh> self.farry[3])
                {
                    self.Y= self.farry[3] - self.mr
                }
                $(this).css({
                    left:self.X,
                    top:self.Y
                });
                self.mouseup($(this));
              }
            }); 
        },
        mouseleave:function(dom){
          dom.mouseleave(function(e){ 
            $(this).mouseup();
          })
        },
        mouseup:function(dom){
          var self = this;
          dom.mouseup(function(e){ 
            var dindex =$(this).index();
            var $dom = $(this);
            if(self.dragdown){
              setTimeout(function(){
                $dom.removeClass("down_class");
                for(var i = 0; i<self.l;i++){
                   if(self.pageX < self.larry[i]["mleft"]  && self.pageX > self.larry[i]["left"] && self.pageY < self.larry[i]["mtop"] &&  self.pageY > self.larry[i]["top"]){
                      self.index = i;
                      break;
                   }else{
                      self.index = self.dom.length -1;  
                   }
                }
                if(dindex == 0 && self.index == 0){
                  $dom.insertBefore(self.options.fdom+" "+"li:eq("+ self.index + 1 +")");
                }else{
                  if(dindex >= self.index ){
                    $dom.insertBefore(self.options.fdom+" "+"li:eq("+ self.index +")");
                  }else{
                    $dom.insertAfter(self.options.fdom+" "+"li:eq("+ self.index +")");
                  }
                }
                if(self.options.callback && self.options.callback()){
                    self.options.callback();
                }
              },10)
              self.dragdown = false;
            } 
          });
        }
    }
    window.drag = drag;
$(function(){
  var a = new drag({
    
  });
})


</script>
</body>
</html>
1 0