jquery implements HTML element drag _jquery

The code is very simple, the effect is very good, directly to everyone on the source code:

Html

<div> <div class= "money-input" > Fixed investment amount: <div class= "Input-rela" > <input type= "text" p
    Laceholder= "/>" <span> </span> </div> </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: Yuan </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 (p
      Arseint (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 (in
      dex== "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", Newle FT) 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 return} if (movex>maxpy) {dragImg.style.left = Maxpy + "p
    X "; $ (dragimg). Parent (). Prev (). Find ("Input"). Val (10000) return}/*dragend xifu*/var num = parseint (movex/movew
  Idth) DragImg.style.left = (min+movewidth*num) + "px"; /*dragend set input*/var Thisnode = $ (dragimg) var spans = Thisnode.parent (). Next (). Find (' span ') var html = SPANS.E Q (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 ("Divd Ebug "). InnerHTML =" MouseMove ("+ E.clientx +", "+ E.clienty +") srcelement= "+ E.srcelement.taGname + "[" + E.srcelement.id + "]";}
 */

The above is the entire contents of this article, I hope you can enjoy.