jQuery实现html元素拖拽


Posted in Javascript onJuly 21, 2015

代码很简单,效果非常棒,直接给大家上源码:

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>

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 + "]";
}
}*/

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript实现拼音排序的方法
Nov 20 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
JavaScript检测鼠标移动方向的方法
May 22 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
原生Javascript和jQuery做轮播图简单例子
Oct 11 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
3分钟了解vue数据劫持的原理实现
May 01 Javascript
Vue运用transition实现过渡动画
May 06 Javascript
初学node.js中实现删除用户路由
May 27 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
jquery插件实现代码雨特效
Apr 24 jQuery
异步安全加载javascript文件的方法
Jul 21 #Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 #Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 #Javascript
SWFObject基本用法实例分析
Jul 20 #Javascript
jQuery.prop() 使用详解
Jul 19 #Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 #Javascript
jQuery的position()方法详解
Jul 19 #Javascript
You might like
推荐25款php中非常有用的类库
2014/09/29 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
文明和谐家庭事迹材料
2014/05/18 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
工厂标语大全
2014/10/06 职场文书
授权委托书协议书
2014/10/16 职场文书
2014年项目工作总结
2014/11/24 职场文书
小班上学期个人总结
2015/02/12 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL