jQuery实现html元素拖拽

代码很简单，效果非常棒，直接给大家上源码：

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>

css

 .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}

js

/**
* 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 )								 
 1/3    1 2 3 下一页 尾页