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脚本的性能的几个注意事项
Dec 22 Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Nov 30 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
异步安全加载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
PHP 手机归属地查询 api
2010/02/08 PHP
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
jQuery代码优化 事件委托篇
2011/11/01 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
python实现进程间通信简单实例
2014/07/23 Python
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
解决python报错MemoryError的问题
2018/06/26 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
HTML5地理定位实例
2014/10/15 HTML / CSS
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
给全校老师的建议书
2014/03/13 职场文书
思想作风建设心得体会
2014/10/22 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
先进班集体申报材料
2014/12/26 职场文书
2015年中秋节活动总结
2015/03/23 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js