jQuery實現html元素拖拽

2020-03-24 16:00:44

字體：大中小

來源：轉載

供稿：網友

img index="js-minus-a" src="../images/minus.png" alt=""/ img id="dragImg" src="../images/money-dw.png" alt="" onDrag="drag(event)" onDragEnd="dragEnd(event)" / img id="dragLine" src="../images/money-line.png" alt=""/ img index="js-plus-a" src="../images/plus.png" alt="" / /div div span 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 + "]";以上所述就是本文的全部內容了，希望大家能夠喜歡。更多編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML5本地存儲應用sessionStorage和localStorage

下一篇：Jquery結合HTML5實現文件上傳