html元素拖拽html
1 <div> 2 <div class="money-input"> 3 定投金额 : 4 <div class="input-rela"> 5 <input type="text" placeholder="2000"/> 6 <span>元</span> 7 </div> 8 9 </div>10 <div class="money-line">11 <img index="js-minus-a" class="js-minus" src="../images/minus.png" alt=""/>12 <img id="dragImg" class="red-rela" src="../images/money-dw.png" alt="" onDrag="drag(event)" onDragEnd="dragEnd(event)" style="left: 265px;"/>13 <img id="dragLine" class="line3" src="../images/money-line.png" alt=""/>14 <img index="js-plus-a" class="js-plus" src="../images/plus.png" alt="" style="margin-left: 880px;"/>15 </div>16 <div class="money-desc">17 <span style="margin-left: 65px;">100</span>18 <span>500</span>19 <span>1000</span>20 <span>2000</span>21 <span>3000</span>22 <span>4000</span>23 <span>5000</span>24 <span>6000</span>25 <span>7000</span>26 <span>8000</span>27 <span>9000</span>28 <span>10000</span>29 </div>30 <p>单位:元</p>31 </div>
CSS
1 .money-input{margin:36px auto 0;width:330px;font-size:14px;color:#818181} 2 .input-rela{width:250px;height:42px;display:inline-block;position:relative} 3 .input-rela>input{width:inherit;height:38px;border:1px solid #eee} 4 .input-rela>span{position:absolute;right:10px;top:13px} 5 .money-line{width:970px;margin:60px auto 0;position:relative} 6 .line3{position:absolute;left:40px;top:10px} 7 .red-rela{position:absolute;top:0;z-index:2;cursor:pointer} 8 .money-desc,.month-desc{font-size:12px;color:#818181} 9 .money-desc+p,.month-desc+p{margin-right:60px;text-align:right;color:#5a5a5a}10 .money-desc>span{display:inline-block;width:71px}11 .month-desc>span{display:inline-block;width:79px}js
1 /** 2 * Created by cq on 2015/6/15. 3 */ 4 $(function(){ 5 6 $('.js-minus').click(function(){ 7 /* min need calculate*/ 8 var index = $(this).attr("index") 9 var move,min; 10 if(index=="js-minus-a"){ 11 move = 77; 12 min = 34; 13 } 14 if(index=="js-minus-b"){ 15 move = 85; 16 min = 36; 17 } 18 var redPoint = $(this).next() 19 var left = redPoint.css("left") 20 var leftInt = left.replace(/px/g,"") 21 if((parseInt(leftInt)-move)>=min){ 22 var newLeft = (parseInt(leftInt)-move)+"px" 23 redPoint.css("left",newLeft) 24 var num = parseInt ( (parseInt(leftInt)-move-min) / move ) 25 var input = $(this).parent().PRev().find("input") 26 if(index=="js-minus-a"){ 27 var spans = $(this).parent().next().find("span") 28 var html = spans.eq(num).html() 29 input.val(html) 30 } 31 if(index=="js-minus-b"){ 32 input.val(getMonth(num)) 33 } 34 } 35 }) 36 37 $('.js-plus').click(function(){ 38 /* max and min need calculate*/ 39 var index = $(this).attr("index") 40 var move , max , min ; 41 if(index=="js-plus-a"){ 42 move = 77; //ÿ??????? 43 max = 881; //???????? 44 min = 34; //??С????? 45 } 46 if(index=="js-plus-b"){ 47 move = 85; 48 max = 886; 49 min = 36; 50 } 51 52 var redPoint = $(this).prev().prev() 53 var left = redPoint.css("left") 54 var leftInt = left.replace(/px/g,"") 55 if((parseInt(leftInt)+move)<=max){ 56 var newLeft = (parseInt(leftInt)+move)+"px" 57 redPoint.css("left",newLeft) 58 var num = parseInt( (parseInt(leftInt)+move-min) / move ) 59 var input = $(this).parent().prev().find("input") 60 if(index=="js-plus-a"){ 61 var spans = $(this).parent().next().find("span") 62 var html = spans.eq(num).html() 63 input.val(html) 64 } 65 if(index=="js-plus-b"){ 66 input.val(getMonth(num)) 67 } 68 } 69 }) 70 71 /*move img js*/ 72 var offsetx = 0, offsety = 0; 73 var dragImg = document.getElementById("dragImg") 74 dragImg.addEventListener("mousedown",beforeDrag,true); 75 }) 76 77 function beforeDrag(ev){ 78 dragImg = ev.target; 79 var l = dragImg.offsetLeft; 80 var t = dragImg.offsetTop; 81 offsetx = ev.clientX - l; 82 offsety = ev.clientY - t; 83 } 84 85 function drag(e){ 86 e.preventDefault(); 87 /*min need calculate*/ 88 var ml = 8,mr = 20,maxy = 70,moveWidth = 77,min=34; 89 var dragImg = e.target; 90 var dragLine = document.getElementById("dragLine"); 91 var movex = e.clientX - offsetx; 92 var movey = e.clientY - offsety; 93 var minPY = dragLine.offsetLeft-ml; 94 var maxPY = dragLine.offsetLeft+dragLine.clientWidth-mr; 95 if(Math.abs(movey)>maxy){ 96 return 97 } 98 if(movex<minPY){ 99 dragImg.style.left = minPY + "px";100 return101 }102 if(movex>maxPY){103 dragImg.style.left = maxPY + "px";104 return105 }106 dragImg.style.left = movex + "px";107 108 }109 110 function dragEnd (e){111 e.preventDefault();112 /*min need calculate*/113 var ml = 8,mr = 20,maxy = 70,moveWidth = 77,min=34;114 var dragImg = e.target;115 var dragLine = document.getElementById("dragLine");116 var movex = e.clientX - offsetx;117 var movey = e.clientY - offsety;118 var minPY = dragLine.offsetLeft-ml;119 var maxPY = dragLine.offsetLeft+dragLine.clientWidth-mr;120 121 if(movex<minPY){122 dragImg.style.left = minPY + "px";123 $(dragImg).parent().prev().find("input").val(100)124 return125 }126 if(movex>maxPY){127 dragImg.style.left = maxPY + "px";128 $(dragImg).parent().prev().find("input").val(10000)129 return130 }131 /*dragEnd xifu*/132 var num = parseInt ( movex / moveWidth )133 dragImg.style.left = (min+moveWidth*num) + "px";134 /*dragEnd set input*/135 var thisNode = $(dragImg)136 var spans = thisNode.parent().next().find('span')137 var html = spans.eq(num).html()138 var input = thisNode.parent().prev().find("input")139 input.val(html)140 }141 142 /*143 function init() {144 document.body.onmousemove = function(e) {145 if (!e) {146 e = window.event;147 }148 else {149 e.srcElement = e.target;150 }151 document.getElementById("divDebug").innerHTML = "mousemove (" + e.clientX + "," + e.clientY + ") srcElement=" + e.srcElement.tagName + "[" + e.srcElement.id + "]";152 }153 }*/
