jquery拖拽示例 | rin部落-web前端开发-主流web技术分享博客

效果图：
html代码：
    <html>
<head>
    <script id="jquery_183" type="text/javascript" class="library" src="./jquery-1.8.3.min.js"></script>
</head>
    <body>
<div style="width:520px;height:20px;margin:10px auto;">
      拖拽状态：<span></span>
  </div>
      <div class="containerX" >
            <img class="dX" />    
  </div>
        <div class="containerXY">
                <img class="dXY" src="./512727af72080.jpg"/>
  </div>
  <div class="containerY">
    <img class="dY" />
  </div>
</body>
        <style>.containerX {
  position:relative;
    border:5px solid gray;
    width:80%;
    height:50px;
    margin:0 auto;
    float:left;
  }

.containerX > img {
  width: 100px;
    height: 50px;
    background-color: rgb(255, 215, 0);
    text-align: center;
    position: absolute;
    left: 0px;
    top: 0px;
    cursor: move;
  }

.containerY {
  position:relative;
    border:5px solid gray;
    width:50px;
    height:1000px;
    margin:0 auto;
    float:right;
  }

.containerY > img {
  width: 50px;
    height: 50px;
    background-color: rgb(255, 215, 0);
    text-align: center;
    position: absolute;
    left: 0px;
    top: 0px;
    cursor: move;
  }

.containerXY {
  position:relative;
    border:5px solid gray;
    width:80%;
    height:1000px;
    margin:0 auto;
    overflow:hidden;
    float:left;

  }

.containerXY > .dXY {
  text-align: center;
    position: absolute;
background-image: url(./512727af72080.jpg);
        cursor: move;
  }

</style>
                <script>$(document).ready(function(){
  var XYpath = '.dXY';
  var Ypath = '.dY';
  var Xpath = '.dX';
  var Ycontainer = '.containerY';
  var Xcontainer = '.containerX';
  var T;

    $("img").bind("dragstart",false);//图片禁止拖动



  $(Xpath).mousedown(function(e){
    T=true;
    var dX = $(this).width();
    var D = e.pageX - $(this).offset().left + 5;// + 5 偏移量
    var ff = $(this);
    $(this).parent().mousemove(function(e){
      var container = $(this).width();
      var X = e.pageX - $(this).offset().left;
      var E = X - D;
      var F = container - dX;
      var G = E;
      if(T){
       ff.css("left",(E) + "px");
       if(E<0){ff.css("left",(0) + "px");G = 0};
       if(E>F){ff.css("left",(F) + "px");G = F};
       $('span').text("x: " + (G));}
     });
  });


    $(Ypath).mousedown(function(e){//Y轴图片按钮按下动作
     T = true;
     var dY = $(this).height(); //图片坐标
     var D = e.pageY - $(this).offset().top + 5; //获取鼠标在图片内的Y距离
     var ff = $(this);
      $(this).parent().mousemove(function(e){// DIV内的移动事件
       var container = $(this).height();//DIV坐标
       var Y = e.pageY - $(this).offset().top;//获取DIV在图片内的距离
       var E = Y - D; //图片边缘离DIV
       var F = container - dY;
       var G = E;//获取一个坐标定值
      if(T){
       ff.css("top",(E) + "px");
       if(E<0){ff.css("top",(0) + "px");G = 0};
       if(E>F){ff.css("top",(F) + "px");G = F};
       $('span').text("y: " + (G));}
     });    
    });


    $(XYpath).mousedown(function(e){
     T = true;
     var dY = $(this).height();//图片坐标
         var dX = $(this).width();
     var D = e.pageY - $(this).offset().top + 5;//获取鼠标在图片内的Y距离
     var d = e.pageX - $(this).offset().left + 5;//获取鼠标在图片内的X距离
     var ff = $(this);
      $(this).parent().mousemove(function(e){// DIV内的移动事件
       var container = $(this).height();//DIV坐标
       var Y = e.pageY - $(this).offset().top;//获取图片在DIV内的鼠标Y距离
       var X = e.pageX - $(this).offset().left;//获取图片在DIV内的鼠标X距离
       var EE = X - d;//图片边缘X距离DIV
       var E = Y - D;//图片边缘Y距离DIV
           var yF = container - dY;
             var xF = container - dX;
       var G = E;//获取一个坐标定值
       if(T){
        ff.css("top",(E) + "px");
        ff.css("left",(EE) + "px");
                $('span').text( "x: " + (EE) + "y: " + (G));
             }
     });
    });


 $(document).mouseup(function(){T=false});
});
</script>
2014-06-20