1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118
| <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script> <script> // 拖拽 var startDrag = function(bar, target, callback) { var getCss = function(o, key) { return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key]; };
var down = function(event) { // 兼容分辨率 bar.style.height = (parseInt(getCss(bar, "width")) * 636 / 900) + 'px'; target.style.backgroundSize = parseInt(getCss(bar, "width")) + 'px ' + (parseInt(getCss(bar, "width")) * 636 / 900) + 'px';
params.flag = true; if (!event) { event = window.event; bar.onselectstart = function() { return false; } } var e = event; params.currentX = e.clientX || e.changedTouches[0].clientX; params.currentY = e.clientY || e.changedTouches[0].clientY; };
var up = function() { params.flag = false; if (getCss(target, "left") !== "auto") { params.left = getCss(target, "left"); } if (getCss(target, "top") !== "auto") { params.top = getCss(target, "top"); } };
var move = function(event) { var e = event ? event : window.event; if (params.flag) { var nowX = e.clientX || e.changedTouches[0].clientX, nowY = e.clientY || e.changedTouches[0].clientY; var disX = nowX - params.currentX, disY = nowY - params.currentY; if ((parseInt(params.left) + disX) > maxX) { resX = maxX; } else if ((parseInt(params.left) + disX) < 0) { resX = 0; } else { resX = parseInt(params.left) + disX; }
if ((parseInt(params.top) + disY) > maxY) { resY = maxY; } else if ((parseInt(params.top) + disY) < 0) { resY = 0; } else { resY = parseInt(params.top) + disY; }
target.style.left = resX + 'px'
target.style.top = resY + 'px'
if (typeof callback == "function") { callback(resX, resY); } if (event.preventDefault) { event.preventDefault(); } return false; } }
var resX = 0, resY = 0; var params = { left: 0, top: 0, currentX: 0, currentY: 0, flag: false };
if (getCss(target, "left") !== "auto") { params.left = getCss(target, "left"); }
if (getCss(target, "top") !== "auto") { params.top = getCss(target, "top"); }
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { console.log("mobile"); target.style.width = '100px'; target.style.height = '100px'; maxX = parseInt(getCss(bar, "width")) - parseInt(getCss(target, "width")); maxY = parseInt(getCss(bar, "height")) - parseInt(getCss(target, "height"));
target.ontouchstart = down
document.ontouchend = up
document.ontouchmove = move } else { console.log("pc"); target.style.width = '150px'; target.style.height = '150px'; maxX = parseInt(getCss(bar, "width")) - parseInt(getCss(target, "width")); maxY = parseInt(getCss(bar, "height")) - parseInt(getCss(target, "height"));
target.onmousedown = down
document.onmouseup = up
document.onmousemove = move }
}; </script>
|