jQuery实现html元素拖拽
代码很简单，效果非常棒，直接给大家上源码：
html
<div> <divclass="money-input"> 定投金额: <divclass="input-rela"> <inputtype="text"placeholder="2000"/> <span>元</span> </div> </div> <divclass="money-line"> <imgindex="js-minus-a"class="js-minus"src="../images/minus.png"alt=""/> <imgid="dragImg"class="red-rela"src="../images/money-dw.png"alt=""onDrag="drag(event)"onDragEnd="dragEnd(event)"style="left:265px;"/> <imgid="dragLine"class="line3"src="../images/money-line.png"alt=""/> <imgindex="js-plus-a"class="js-plus"src="../images/plus.png"alt=""style="margin-left:880px;"/> </div> <divclass="money-desc"> <spanstyle="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:36pxauto0;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:1pxsolid#eee}
.input-rela>span{position:absolute;right:10px;top:13px}
.money-line{width:970px;margin:60pxauto0;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
/**
*Createdbycqon2015/6/15.
*/
$(function(){
$('.js-minus').click(function(){
/*minneedcalculate*/
varindex=$(this).attr("index")
varmove,min;
if(index=="js-minus-a"){
move=77;
min=34;
}
if(index=="js-minus-b"){
move=85;
min=36;
}
varredPoint=$(this).next()
varleft=redPoint.css("left")
varleftInt=left.replace(/px/g,"")
if((parseInt(leftInt)-move)>=min){
varnewLeft=(parseInt(leftInt)-move)+"px"
redPoint.css("left",newLeft)
varnum=parseInt((parseInt(leftInt)-move-min)/move)
varinput=$(this).parent().prev().find("input")
if(index=="js-minus-a"){
varspans=$(this).parent().next().find("span")
varhtml=spans.eq(num).html()
input.val(html)
}
if(index=="js-minus-b"){
input.val(getMonth(num))
}
}
})
$('.js-plus').click(function(){
/*maxandminneedcalculate*/
varindex=$(this).attr("index")
varmove,max,min;
if(index=="js-plus-a"){
move=77;//ÿ��ƫ����
max=881;//��������
min=34;//��Сƫ����
}
if(index=="js-plus-b"){
move=85;
max=886;
min=36;
}
varredPoint=$(this).prev().prev()
varleft=redPoint.css("left")
varleftInt=left.replace(/px/g,"")
if((parseInt(leftInt)+move)<=max){
varnewLeft=(parseInt(leftInt)+move)+"px"
redPoint.css("left",newLeft)
varnum=parseInt((parseInt(leftInt)+move-min)/move)
varinput=$(this).parent().prev().find("input")
if(index=="js-plus-a"){
varspans=$(this).parent().next().find("span")
varhtml=spans.eq(num).html()
input.val(html)
}
if(index=="js-plus-b"){
input.val(getMonth(num))
}
}
})
/*moveimgjs*/
varoffsetx=0,offsety=0;
vardragImg=document.getElementById("dragImg")
dragImg.addEventListener("mousedown",beforeDrag,true);
})
functionbeforeDrag(ev){
dragImg=ev.target;
varl=dragImg.offsetLeft;
vart=dragImg.offsetTop;
offsetx=ev.clientX-l;
offsety=ev.clientY-t;
}
functiondrag(e){
e.preventDefault();
/*minneedcalculate*/
varml=8,mr=20,maxy=70,moveWidth=77,min=34;
vardragImg=e.target;
vardragLine=document.getElementById("dragLine");
varmovex=e.clientX-offsetx;
varmovey=e.clientY-offsety;
varminPY=dragLine.offsetLeft-ml;
varmaxPY=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";
}
functiondragEnd(e){
e.preventDefault();
/*minneedcalculate*/
varml=8,mr=20,maxy=70,moveWidth=77,min=34;
vardragImg=e.target;
vardragLine=document.getElementById("dragLine");
varmovex=e.clientX-offsetx;
varmovey=e.clientY-offsety;
varminPY=dragLine.offsetLeft-ml;
varmaxPY=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
}
/*dragEndxifu*/
varnum=parseInt(movex/moveWidth)
dragImg.style.left=(min+moveWidth*num)+"px";
/*dragEndsetinput*/
varthisNode=$(dragImg)
varspans=thisNode.parent().next().find('span')
varhtml=spans.eq(num).html()
varinput=thisNode.parent().prev().find("input")
input.val(html)
}
/*
functioninit(){
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+"]";
}
}*/
以上所述就是本文的全部内容了，希望大家能够喜欢。