首页 / 脚本样式 / JavaScript / 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 + "]";}}*/