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:;z-index:;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

  
  1 /**
  * 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 + "]";
  }
  }*/