jquery implements HTML element drag _jquery

Source: Internet
Author: User
Tags prev

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.