拖拽改变元素位置或大小
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了拖拽改变元素位置或大小相关的知识，希望对你有一定的参考价值。
<!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;
}
.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;
}
.r{
right:-5px;
top:50%;
margin-top:-5px;
}
.t{
top:-5px;
left:50%;
margin-left:-5px;
}
.b{
bottom:-5px;
left:50%;
margin-left:-5px;
}
.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‘);
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‘);
});
}
//拖拽改变图标位置
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‘;
}
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 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 = oldH + newX;
if (newW >= W) {
newW = W;
}
if (newH >= H - oldT) {
newH = H - oldT;
}
if (newL <= 0) {
newL = 0;
} else if (newL >= W - obj2.offsetWidth - getPos(obj3).left) {
newL = W - obj2.offsetWidth - getPos(obj3).left;
}
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 = oldW + newY;
if (newW >= W-oldL) {
newW = W - oldL;
}
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;
var newH = oldH + newX;
if (newW >= W-oldL) {
newW = W - oldL;
newH = W - oldL;
}
}
if (obj1.className.indexOf(‘b‘) != -1) {
var newY = oEvent.clientY - downY;
var newH = oldH + newY;
var newW = oldW + newY;
if (newW >= W - oldL) {
newW = W - oldL;
}
if (newH >= H - oldT) {
newH = H - oldT;
}
}
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>
以上是关于拖拽改变元素位置或大小的主要内容，如果未能解决你的问题，请参考以下文章
CSS DIV绝对定位 后 页面的大小改变 div层位置如何保持不变