jQuery实现html元素拖拽

<div>  <div class="money-input">    定投金额 :    <div class="input-rela">      <input type="text" placeholder="2000"/>      <span>元</span>    </div>  </div>  <div class="money-line">    <img index="js-minus-a" class="js-minus" src="../images/minus.png" alt=""/>    <img id="dragImg" class="red-rela" src="../images/money-dw.png" alt="" onDrag="drag(event)" onDragEnd="dragEnd(event)" style="left: 265px;"/>    <img id="dragLine" class="line3" src="../images/money-line.png" alt=""/>    <img index="js-plus-a" class="js-plus" src="../images/plus.png" alt="" style="margin-left: 880px;"/>  </div>  <div class="money-desc">    <span style="margin-left: 65px;">100</span>    <span>500</span>    <span>1000</span>    <span>2000</span>    <span>3000</span>    <span>4000</span>    <span>5000</span>    <span>6000</span>    <span>7000</span>    <span>8000</span>    <span>9000</span>    <span>10000</span>  </div>  <p>单位:元</p></div>

 .money-input{margin:36px auto 0;width:330px;font-size:14px;color:#818181} .input-rela{width:250px;height:42px;display:inline-block;position:relative} .input-rela>input{width:inherit;height:38px;border:1px solid #eee} .input-rela>span{position:absolute;right:10px;top:13px} .money-line{width:970px;margin:60px auto 0;position:relative} .line3{position:absolute;left:40px;top:10px} .red-rela{position:absolute;top:0;z-index:2;cursor:pointer} .money-desc,.month-desc{font-size:12px;color:#818181} .money-desc+p,.month-desc+p{margin-right:60px;text-align:right;color:#5a5a5a} .money-desc>span{display:inline-block;width:71px} .month-desc>span{display:inline-block;width:79px}

/*** Created by cq on 2015/6/15.*/$(function(){  $('.js-minus').click(function(){    /* min need calculate*/    var index = $(this).attr("index")    var move,min;    if(index=="js-minus-a"){      move = 77;      min = 34;    }    if(index=="js-minus-b"){      move = 85;      min = 36;    }    var redPoint = $(this).next()    var left = redPoint.css("left")    var leftInt = left.replace(/px/g,"")    if((parseInt(leftInt)-move)>=min){      var newLeft = (parseInt(leftInt)-move)+"px"      redPoint.css("left",newLeft)      var num = parseInt ( (parseInt(leftInt)-move-min) / move )      var input = $(this).parent().prev().find("input")      if(index=="js-minus-a"){        var spans = $(this).parent().next().find("span")        var html = spans.eq(num).html()        input.val(html)      }      if(index=="js-minus-b"){        input.val(getMonth(num))      }    }  })  $('.js-plus').click(function(){    /* max and min need calculate*/    var index = $(this).attr("index")    var move , max , min ;    if(index=="js-plus-a"){      move = 77; //ÿ��ƫ����      max = 881; //��������      min = 34; //��Сƫ����    }    if(index=="js-plus-b"){      move = 85;      max = 886;      min = 36;    }    var redPoint = $(this).prev().prev()    var left = redPoint.css("left")    var leftInt = left.replace(/px/g,"")    if((parseInt(leftInt)+move)<=max){      var newLeft = (parseInt(leftInt)+move)+"px"      redPoint.css("left",newLeft)      var num = parseInt( (parseInt(leftInt)+move-min) / move )      var input = $(this).parent().prev().find("input")      if(index=="js-plus-a"){        var spans = $(this).parent().next().find("span")        var html = spans.eq(num).html()        input.val(html)      }      if(index=="js-plus-b"){        input.val(getMonth(num))      }    }  })  /*move img js*/  var offsetx = 0, offsety = 0;  var dragImg = document.getElementById("dragImg")  dragImg.addEventListener("mousedown",beforeDrag,true);})function beforeDrag(ev){  dragImg = ev.target;  var l = dragImg.offsetLeft;  var t = dragImg.offsetTop;  offsetx = ev.clientX - l;  offsety = ev.clientY - t;}function drag(e){  e.preventDefault();  /*min need calculate*/  var ml = 8,mr = 20,maxy = 70,moveWidth = 77,min=34;  var dragImg = e.target;  var dragLine = document.getElementById("dragLine");  var movex = e.clientX - offsetx;  var movey = e.clientY - offsety;  var minPY = dragLine.offsetLeft-ml;  var maxPY = dragLine.offsetLeft+dragLine.clientWidth-mr;  if(Math.abs(movey)>maxy){    return  }  if(movex<minPY){    dragImg.style.left = minPY + "px";    return  }  if(movex>maxPY){    dragImg.style.left = maxPY + "px";    return  }  dragImg.style.left = movex + "px";}function dragEnd (e){  e.preventDefault();  /*min need calculate*/  var ml = 8,mr = 20,maxy = 70,moveWidth = 77,min=34;  var dragImg = e.target;  var dragLine = document.getElementById("dragLine");  var movex = e.clientX - offsetx;  var movey = e.clientY - offsety;  var minPY = dragLine.offsetLeft-ml;  var maxPY = dragLine.offsetLeft+dragLine.clientWidth-mr;  if(movex<minPY){    dragImg.style.left = minPY + "px";    $(dragImg).parent().prev().find("input").val(100)    return  }  if(movex>maxPY){    dragImg.style.left = maxPY + "px";    $(dragImg).parent().prev().find("input").val(10000)    return  }  /*dragEnd xifu*/  var num = parseInt ( movex / moveWidth )  dragImg.style.left = (min+moveWidth*num) + "px";  /*dragEnd set input*/  var thisNode = $(dragImg)  var spans = thisNode.parent().next().find('span')  var html = spans.eq(num).html()  var input = thisNode.parent().prev().find("input")  input.val(html)}/*function init() {document.body.onmousemove = function(e) {if (!e) {e = window.event;}else {e.srcElement = e.target;}document.getElementById("divDebug").innerHTML = "mousemove (" + e.clientX + "," + e.clientY + ") srcElement=" + e.srcElement.tagName + "[" + e.srcElement.id + "]";}}*/