jQuery實現html元素拖拽

2024-05-06 16:23:30

字體：大中小

來源：轉載

供稿：網友

本文主要給大家分享的是使用jQuery實現html元素可拖拽的效果，十分的炫酷，代碼也相對比較簡單，有需要的小伙伴可以參考下。

代碼很簡單，效果非常棒，直接給大家上源碼：

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}

/**

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

}

}*/