拖拽改變元素位置或大小bug修復

時間 2019-11-12

原文原文鏈接

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
body{
background:#000;
}
.upshop-view{
width:320px;
height:499px;
background:#fff;
background-size:contain;
position:relative;
z-index:9998;
margin:0 auto;html

overflow:hidden;jquery

}
.touchmove{
position:absolute;
z-index:9990;
}
.touchmove span{
display:block;
width:10px;
height:10px;
background:#8F8F8F;
position:absolute;
display:none;
z-index:9999;
}
.l{
left:-5px;
top:50%;
margin-top:-5px;ide

cursor:w-resize;this

}
.r{
right:-5px;
top:50%;
margin-top:-5px;spa

cursor:e-resize;
}
.t{
top:-5px;
left:50%;
margin-left:-5px;htm

cursor:n-resize;
}
.b{
bottom:-5px;
left:50%;
margin-left:-5px;ip

cursor:s-resize;
}
.border{
border:1px dashed #ccc;
}
.touchmove1{
width:100px;
height:100px;
top:135px;
left:110px;
}
.touchmove1 img{
display:block;
width:100%;
height:100%;
background:pink;
}
</style>
<script src="jquery-1.7.2.js"></script>
<script>
$(function(){
//拖拽圖標
var oUpshopView = document.getElementById('upshop_view');
var oTouchmove1 = oUpshopView.getElementsByTagName('div')[0];
var oImg1 = $('#touchmove1').children('img')[0];
var aSpan1 = $('#touchmove1').children('span');utf-8

ShowBox($('#touchmove1'));
//拖拽改變圖標大小
for (var i = 0; i < aSpan1.length; i++) {
DragSize(aSpan1[i], oTouchmove1, oUpshopView);
}
//拖拽改變圖標位置
DragPosition(oImg1,oTouchmove1, oUpshopView);
});
function ShowBox(obj) {
obj.on('mouseenter', function () {
$(this).children('span').show();
$(this).addClass('border');
});
obj.on('mouseleave', function () {
$(this).children('span').hide();
$(this).removeClass('border');
});
}rem

///手機展現區域拖拽改變圖標位置
function getPos(obj) {
var l = 0;
var t = 0;
while (obj) {
l += obj.offsetLeft;
t += obj.offsetTop;
obj = obj.offsetParent;
}
return { left: l, top: t };
}
function DragPosition(obj1, obj2, obj3) {//obj1拖拽的元素,obj2改變的元素，obj3拖拽元素的父級用於限制拖拽區域；
var W = obj3.offsetWidth;
var H = obj3.offsetHeight;
obj1.onmousedown = function (ev) {
var oEvent = ev || event;
var disX = oEvent.clientX - getPos(obj2).left;
var disY = oEvent.clientY - getPos(obj2).top;
document.onmousemove = function (ev) {
var oEvent = ev || event;
var l = oEvent.clientX - disX - getPos(obj3).left;
var t = oEvent.clientY - disY - getPos(obj3).top;
if (l <= 0) {
l = 0;
} else if (l >= W - obj2.offsetWidth) {
l = W - obj2.offsetWidth;
}
if (t <= 0) {
t = 0;
} else if (t >= H - obj2.offsetHeight) {
t = H - obj2.offsetHeight;
}
obj2.style.left = l + 'px';
obj2.style.top = t + 'px';
localStorage.left1 = l;
localStorage.top1 = t;文檔

}
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
obj1.releaseCapture && obj1.releaseCapture();
}
obj1.setCapture && obj1.setCapture();
return false;
}

}

//手機展現區域拖拽改變圖標大小function DragSize(obj1, obj2, obj3) {//obj1:拖拽的元素,obj2:改變的元素,obj3改變元素的父級用於限制拖拽區域; var W = obj3.offsetWidth; var H = obj3.offsetHeight; obj1.onmousedown = function (ev) { var oEvent = ev || event; var oldW = obj2.offsetWidth; var oldH = obj2.offsetHeight; var scale = 1; var oldL = obj2.offsetLeft; var oldT = obj2.offsetTop; var downX = oEvent.clientX; var downY = oEvent.clientY; document.onmousemove = function (ev) { var oEvent = ev || event; if (obj1.className.indexOf('l') != -1) { var newX = downX - oEvent.clientX; var newL = oldL - newX; var newW = oldW + newX; var newH = newW / scale; if (newW >= W) { newW = W; newH = newW / scale; } if (newH >= H - oldT) { newH = H - oldT; newW = newH * scale; } if (newL <= 0) { newL = 0; } else if (newL >= W - obj2.offsetWidth) { newL = W - obj2.offsetWidth; } obj2.style.left = newL + 'px'; } if (obj1.className.indexOf('t') != -1) { var newY = downY - oEvent.clientY; var newT = oldT - newY; var newH = oldH + newY; var newW = newH * scale; if (newW >= W - oldL) { newW = W - oldL; newH = newW * scale; } if (newH >= H) { newH = H; } if (newT <= 0) { newT = 0; } else if (newT >= H - obj2.offsetHeight) { newT = H - obj2.offsetHeight; } obj2.style.top = newT + 'px'; } if (obj1.className.indexOf('r') != -1) { var newX = oEvent.clientX - downX; var newW = oldW + newX; if (newW >= W - oldL) { newW = W - oldL; } var newH = newW / scale; if (newH >= H - oldT) { newH = H - oldT; newW = newH * scale; } } if (obj1.className.indexOf('b') != -1) { var newY = oEvent.clientY - downY; var newH = oldH + newY; var newW = newH * scale; if (newW >= W - oldL) { newW = W - oldL; newH = newW / scale; } if (newH >= H - oldT) { newH = H - oldT; newW = newH * scale; } } obj2.style.width = newW + 'px'; obj2.style.height = newH + 'px'; } document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; obj1.releaseCapture && obj1.releaseCapture(); } obj1.setCapture && obj1.setCapture(); return false; }}</script></head><body> <div class="upshop-view" id="upshop_view"> <div class="touchmove touchmove1" id="touchmove1"> <img src="../../Images/Common/headLogo.jpg"/> <span class="l"></span> <span class="r"></span> <span class="t"></span> <span class="b"></span> </div> <div></body></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。