代码很简单，效果非常棒，直接给大家上源码：
html
<div> <div> 定投金额 : <div> <input type="text" placeholder="2000"/> <span>元</span> </div> </div> <div> <img index="js-minus-a" src="../images/minus.png" alt=""/> <img id="dragImg" src="../images/money-dw.png" alt="" onDrag="drag(event)" onDragEnd="dragEnd(event)"/> <img id="dragLine" src="../images/money-line.png" alt=""/> <img index="js-plus-a" src="../images/plus.png" alt=""/> </div> <div> <span>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 ) 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 + "]"; } }*/
以上所述就是本文的全部内容了，希望大家能够喜欢。
【jQuery实现html元素拖拽】相关文章：
★ jQuery插件bgStretcher.js实现全屏背景特效