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

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