jQuery实现html元素拖拽

2020-05-23 06:10:50易采站长站整理

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;