Drag html elements using jQuery and jqueryhtml

Drag html elements using jQuery and jqueryhtml

The code is very simple, and the results are very good. You can use the source code directly:

Html

<Div> <div class = "money-input"> fixed investment amount: <div class = "input-rela"> <input type = "text" placeholder = "2000"/> <span> RMB </span> </div> <div class = "money-line">     </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> unit: RMB </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 + "]";}}*/

The above is all the content of this article. I hope you will like it.