js拖拽
阿新 • • 發佈：2018-08-14
拖拽 body pub relative 想象 mousedown scl remove 還原 .gif)
HTML
.gif)
HTML
.gif)
.gif)
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0035)http://fgm.cc/learn/lesson8/03.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>窗口拖拽（改變大小/最小化/最大化/還原/關閉）</title>
<style type="text/css">
body,div,h2{margin:0;padding:0;}
body{background:url(img/bg.jpg);font:12px/1.5 \5fae\8f6f\96c5\9ed1;color:#333;}
#drag{position:absolute;top:100px;left:100px;width:300px;height:160px;background:#e9e9e9;border:1px solid #444;border-radius:5px;box-shadow:0 1px 3px 2px #666;}
#drag .title{position:relative;height:27px;margin:5px;}
#drag .title h2{font-size:14px;height:27px;line-height:24px;border-bottom:1px solid #A1B4B0;}
#drag .title div{position:absolute;height:19px;top:2px;right:0;}
#drag .title a,a.open{float:left;width:21px;height:19px;display:block;margin-left:5px;background:url(img/tool.png) no-repeat;}
a.open{position:absolute;top:10px;left:50%;margin-left:-10px;background-position:0 0;}
a.open:hover{background-position:0 -29px;}
#drag .title a.min{background-position:-29px 0;}
#drag .title a.min:hover{background-position:-29px -29px;}
#drag .title a.max{background-position:-60px 0;}
#drag .title a.max:hover{background-position:-60px -29px;}
#drag .title a.revert{background-position:-149px 0;display:none;}
#drag .title a.revert:hover{background-position:-149px -29px;}
#drag .title a.close{background-position:-89px 0;}
#drag .title a.close:hover{background-position:-89px -29px;}
#drag .content{overflow:auto;margin:0 5px;}
#drag .resizeBR{position:absolute;width:14px;height:14px;right:0;bottom:0;overflow:hidden;cursor:nw-resize;background:url(img/resize.png) no-repeat;}
#drag .resizeL,#drag .resizeT,#drag .resizeR,#drag .resizeB,#drag .resizeLT,#drag .resizeTR,#drag .resizeLB{position:absolute;background:#000;overflow:hidden;opacity:0;filter:alpha(opacity=0);}
#drag .resizeL,#drag .resizeR{top:0;width:5px;height:100%;cursor:w-resize;}
#drag .resizeR{right:0;}
#drag .resizeT,#drag .resizeB{width:100%;height:5px;cursor:n-resize;}
#drag .resizeT{top:0;}
#drag .resizeB{bottom:0;}
#drag .resizeLT,#drag .resizeTR,#drag .resizeLB{width:8px;height:8px;background:#FF0;}
#drag .resizeLT{top:0;left:0;cursor:nw-resize;}
#drag .resizeTR{top:0;right:0;cursor:ne-resize;}
#drag .resizeLB{left:0;bottom:0;cursor:ne-resize;}
</style>
<script type="text/javascript">
/*-------------------------- +
獲取id, class, tagName
+-------------------------- */
var get = {
byId: function(id) {
return typeof id === "string" ? document.getElementById(id) : id
},
byClass: function(sClass, oParent) {
var aClass = [];
var reClass = new RegExp("(^| )" + sClass + "( |$)");
var aElem = this.byTagName("*", oParent);
for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
return aClass
},
byTagName: function(elem, obj) {
return (obj || document).getElementsByTagName(elem)
}
};
var dragMinWidth = 250;
var dragMinHeight = 124;
/*-------------------------- +
拖拽函數
+-------------------------- */
function drag(oDrag, handle)
{
var disX = dixY = 0;
var oMin = get.byClass("min", oDrag)[0];
var oMax = get.byClass("max", oDrag)[0];
var oRevert = get.byClass("revert", oDrag)[0];
var oClose = get.byClass("close", oDrag)[0];
handle = handle || oDrag;
handle.style.cursor = "move";
handle.onmousedown = function (event)
{
var event = event || window.event;
disX = event.clientX - oDrag.offsetLeft;
disY = event.clientY - oDrag.offsetTop;
document.onmousemove = function (event)
{
var event = event || window.event;
var iL = event.clientX - disX;
var iT = event.clientY - disY;
var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;
var maxT = document.documentElement.clientHeight - oDrag.offsetHeight;
iL <= 0 && (iL = 0);
iT <= 0 && (iT = 0);
iL >= maxL && (iL = maxL);
iT >= maxT && (iT = maxT);
oDrag.style.left = iL + "px";
oDrag.style.top = iT + "px";
return false
};
document.onmouseup = function ()
{
document.onmousemove = null;
document.onmouseup = null;
this.releaseCapture && this.releaseCapture()
};
this.setCapture && this.setCapture();
return false
};
//最大化按鈕
oMax.onclick = function ()
{
oDrag.style.top = oDrag.style.left = 0;
oDrag.style.width = document.documentElement.clientWidth - 2 + "px";
oDrag.style.height = document.documentElement.clientHeight - 2 + "px";
this.style.display = "none";
oRevert.style.display = "block";
};
//還原按鈕
oRevert.onclick = function ()
{
oDrag.style.width = dragMinWidth + "px";
oDrag.style.height = dragMinHeight + "px";
oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + "px";
oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + "px";
this.style.display = "none";
oMax.style.display = "block";
};
//最小化按鈕
oMin.onclick = oClose.onclick = function ()
{
oDrag.style.display = "none";
var oA = document.createElement("a");
oA.className = "open";
oA.href = "javascript:;";
oA.title = "還原";
document.body.appendChild(oA);
oA.onclick = function ()
{
oDrag.style.display = "block";
document.body.removeChild(this);
this.onclick = null;
};
};
//阻止冒泡
oMin.onmousedown = oMax.onmousedown = oClose.onmousedown = function (event)
{
this.onfocus = function () {this.blur()};
(event || window.event).cancelBubble = true
};
}
/*-------------------------- +
改變大小函數
+-------------------------- */
function resize(oParent, handle, isLeft, isTop, lockX, lockY)
{
handle.onmousedown = function (event)
{
var event = event || window.event;
var disX = event.clientX - handle.offsetLeft;
var disY = event.clientY - handle.offsetTop;
var iParentTop = oParent.offsetTop;
var iParentLeft = oParent.offsetLeft;
var iParentWidth = oParent.offsetWidth;
var iParentHeight = oParent.offsetHeight;
document.onmousemove = function (event)
{
var event = event || window.event;
var iL = event.clientX - disX;
var iT = event.clientY - disY;
var maxW = document.documentElement.clientWidth - oParent.offsetLeft - 2;
var maxH = document.documentElement.clientHeight - oParent.offsetTop - 2;
var iW = isLeft ? iParentWidth - iL : handle.offsetWidth + iL;
var iH = isTop ? iParentHeight - iT : handle.offsetHeight + iT;
isLeft && (oParent.style.left = iParentLeft + iL + "px");
isTop && (oParent.style.top = iParentTop + iT + "px");
iW < dragMinWidth && (iW = dragMinWidth);
iW > maxW && (iW = maxW);
lockX || (oParent.style.width = iW + "px");
iH < dragMinHeight && (iH = dragMinHeight);
iH > maxH && (iH = maxH);
lockY || (oParent.style.height = iH + "px");
if((isLeft && iW == dragMinWidth) || (isTop && iH == dragMinHeight)) document.onmousemove = null;
return false;
};
document.onmouseup = function ()
{
document.onmousemove = null;
document.onmouseup = null;
};
return false;
}
};
window.onload = window.onresize = function ()
{
var oDrag = document.getElementById("drag");
var oTitle = get.byClass("title", oDrag)[0];
var oL = get.byClass("resizeL", oDrag)[0];
var oT = get.byClass("resizeT", oDrag)[0];
var oR = get.byClass("resizeR", oDrag)[0];
var oB = get.byClass("resizeB", oDrag)[0];
var oLT = get.byClass("resizeLT", oDrag)[0];
var oTR = get.byClass("resizeTR", oDrag)[0];
var oBR = get.byClass("resizeBR", oDrag)[0];
var oLB = get.byClass("resizeLB", oDrag)[0];
drag(oDrag, oTitle);
//四角
resize(oDrag, oLT, true, true, false, false);
resize(oDrag, oTR, false, true, false, false);
resize(oDrag, oBR, false, false, false, false);
resize(oDrag, oLB, true, false, false, false);
//四邊
resize(oDrag, oL, true, false, false, true);
resize(oDrag, oT, false, true, true, false);
resize(oDrag, oR, false, false, false, true);
resize(oDrag, oB, false, false, true, false);
oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + "px";
oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + "px";
}
</script>
</head>
<body>
<div id="drag" style="left: 661px; top: 131px; width: 733px; height: 549px;">
<div class="title" style="cursor: move;">
<h2>這是一個可以拖動的窗口</h2>
<div>
<a class="min" href="javascript:;" title="最小化"></a>
<a class="max" href="javascript:;" title="最大化"></a>
<a class="revert" href="javascript:;" title="還原"></a>
<a class="close" href="javascript:;" title="關閉"></a>
</div>
</div>
<div class="resizeL"></div>
<div class="resizeT"></div>
<div class="resizeR"></div>
<div class="resizeB"></div>
<div class="resizeLT"></div>
<div class="resizeTR"></div>
<div class="resizeBR"></div>
<div class="resizeLB"></div>
<div class="content">
① 窗口可以拖動；<br>
② 窗口可以通過八個方向改變大小；<br>
③ 窗口可以最小化、最大化、還原、關閉；<br>
④ 限制窗口最小寬度/高度。
</div>
</div>
</body></html>
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0035)http://fgm.cc/learn/lesson6/01.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>完美拖拽</title>
<style type="text/css">
html,body{overflow:hidden;}
body,div,h2,p{margin:0;padding:0;}
body{color:#fff;background:#000;font:12px/2 Arial;}
p{padding:0 10px;margin-top:10px;}
span{color:#ff0;padding-left:5px;}
#box{position:absolute;width:300px;height:150px;background:#333;border:2px solid #ccc;top:50%;left:50%;margin:-75px 0 0 -150px;}
#box h2{height:25px;cursor:move;background:#222;border-bottom:2px solid #ccc;text-align:right;padding:0 10px;}
#box h2 a{color:#fff;font:12px/25px Arial;text-decoration:none;outline:none;}
</style>
<script type="text/javascript">
window.onload=function(){
var positionArray = [];
var box = document.getElementById("box");
box.onmousedown = function(evt){
positionArray = [];
var x = evt.offsetX;
var y = evt.offsetY;
document.onmousemove = function(evt){
box.style.left = evt.clientX - x + "px";
box.style.top = evt.clientY - y + "px";
console.log({left:box.offsetLeft, top: box.offsetTop})
positionArray.push({left:box.offsetLeft, top: box.offsetTop});
}
}
box.onmouseup = function(){
document.onmousemove = null;
}
box.children[0].firstChild.onmousedown = function(evt){
evt.stopPropagation();
}
box.children[0].firstChild.onclick = function(){
console.log(positionArray.length);
var index = positionArray.length-1;
var timer = setInterval(function(){
if(index < 0) {
clearInterval(timer);
return;
}
box.style.left = positionArray[index--].left+"px";
box.style.top = positionArray[index--].top+"px";
},30);
}
};
</script>
</head>
<body>
<div id="box" style="margin-left: 0px; margin-top: 0px; left: 533px; top: 231px;">
<h2><a href="javascript:;">點擊回放拖動軌跡</a></h2>
<p><strong>Drag:</strong><span>false</span></p>
<p><strong>offsetTop:</strong><span>231</span></p>
<p><strong>offsetLeft:</strong><span>533</span></p>
</div>
</body></html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box {
position: absolute;
width: 100px;
height: 100px;
background: red;
cursor: move;
}
</style>
</head>
<body>
活在自己幻想裏的母親和希冀得到愛的女兒。 ------------------題記
厭倦和巨大的悲傷後面，充塞著霧靄沈沈的生存。優雅美麗又自私偏執的法國女人Hanah，同時是母親，也是攝影家。
然而這樣的身份對於女兒Violtte來說就是一場災難。每個小姑娘，有誰沒在小時候偷偷用過媽媽的化妝品，沒偷偷穿過媽媽的高跟鞋，
沒想象過自己長大的樣子？但是我們都幸福的長大了，長成了Hanah眼裏的庸俗的凡人。
Hanah則把這些變為現實諸加在了女兒Violtte的身上。開始我甚至會慨嘆到底是從事藝術工作的，真是前衛先鋒的母親。
Violtte開始有著的那一點新鮮和興奮，能和母親共處一室或者說能幫母親工作的滿足成了整幕悲劇裏唯一平和溫馨的片段。
梳麻花辮著毛衫的跳房子小姑娘就像洋娃娃一樣被母親一步步擺弄成自己喜歡的樣子——穿漂亮的衣服，畫精致的妝，拍美美的照片，
見識形形色色的人。但母親Hanah並不止於此，她想要的越來越多，或哥特或洛可可的蘿莉已經不足以吸引眼球，還要更大膽更搏出位的，
女兒身上的衣服變成了通往藝術殿堂的枷鎖，藝術與色情在母親眼裏達成了完美的統一。
美有沒有邊界，如果有，它在哪？母親得到了自己夢寐以求的，贊美與法郎源源不斷。女兒失去了所能失去的，不被同齡人接受，也不能一夕長大。
有多愛就有多恨。Violtte逃回家裏反鎖了門向奶奶哭訴甚至說是求助——“我再也不要見到她”，
年邁的奶奶是以怎樣的心情說“我老了，我又老又累，我不能幫你了”。Violtte只有一個媽媽，但Hanah不止有一個模特。
Violtte不能繼續拍下去同時接受不了媽媽有新模特，又不能像電影開頭的那樣回歸安寧的生活。
她就在這個夾縫中苦苦掙紮，在這些矛盾裏幾近崩潰，她甚至對Hanah大吼“我想死”。
影片末尾，Hanah透露的那些隱秘終於成了壓垮駱駝的最後一根稻草——我的血液裏流淌著incest的原罪。
所以Hanah 是如此厭惡“父系”，不僅是為自己也是為女兒。 對母親的失望恨意終於變成了惡心和深刻的悲哀，
Violtte在失去母愛的同時也失去了父愛，唯一的救贖——奶奶早已離世，無法面對這些的Violtte就只能不斷的逃避下去，不然還能怎麽辦？
這樣大一個世界，她卻連一個夾縫都沒有。
也許Hanah是真的愛Violtte，如此悲傷，又如此沈重。——也許你我終將行蹤不明，但是你該知道我曾經為你動情
<div id="box"></div>
<script>
var oBox = document.getElementById(‘box‘);
var maxLeft = document.documentElement.clientWidth - oBox.offsetWidth;
var maxTop = document.documentElement.clientHeight - oBox.offsetHeight;
oBox.onmousedown = function (ev) {
var e = ev || window.event;
// 記錄鼠標相對於box左側和上側的偏移距離
var iX = e.clientX - oBox.offsetLeft;
var iY = e.clientY - oBox.offsetTop;
// 創建一個透明層
if(oBox.setCapture) {
oBox.setCapture();
}
// 鼠標移動
document.onmousemove = function (ev) {
var e = ev || window.event;
// 計算移動後的距離
var iL = e.clientX - iX;
var iT = e.clientY - iY;
// 限定左側
if(iL < 0) {
iL = 0;
}
// 限定上側
if(iT < 0) {
iT = 0;
}
// 限定右側
if(iL > maxLeft) {
iL = maxLeft;
}
// 限定下側
if(iT > maxTop) {
iT = maxTop;
}
oBox.style.left = iL + ‘px‘;
oBox.style.top = iT + ‘px‘;
}
// 鼠標松開
document.onmouseup = function () {
// 取消mousemove事件
document.onmousemove = null;
// 取消up事件
document.onmouseup = null;
// 釋放透明層（捕獲）
if(oBox.releaseCapture) {
oBox.releaseCapture();
}
}
// 阻止瀏覽器的默認行為
return false;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九宮格拖拽</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
position: relative;
list-style: none;
margin: 30px auto;
width: 400px;
height: 400px;
border: 1px solid #ccc;
}
#box li {
position: absolute;
width: 120px;
line-height: 120px;
background: #eee;
font-size: 50px;
text-align: center;
}
#box .active {
z-index: 1;
color: #fff;
background: blue;
}
</style>
</head>
<body>
<ul id="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<script>
var oBox = document.getElementById(‘box‘);
var aLi = oBox.children;
for(var i = 0; i < aLi.length; i++) {
// 第1LI：left: 10 + 0 * 130 top: 10 + 0 * 130
// 第2LI：left: 10 + 1 * 130 top: 10 + 0 * 130
// 第3LI：left: 10 + 2 * 130 top: 10 + 0 * 130
// 第4LI：left: 10 + 0 * 130 top: 10 + 1 * 130
// 第5LI：left: 10 + 1 * 130 top: 10 + 1 * 130
// 第6LI：left: 10 + 2 * 130 top: 10 + 1 * 130
// 第7LI：left: 10 + 0 * 130 top: 10 + 2 * 130
// 第8LI：left: 10 + 1 * 130 top: 10 + 2 * 130
// 第9LI：left: 10 + 2 * 130 top: 10 + 2 * 130
// 布局
aLi[i].style.left = 10 + (i % 3) * 130 + ‘px‘;
aLi[i].style.top = 10 + Math.floor(i / 3) * 130 + ‘px‘;
// 記錄順序
aLi[i].index = i;
// 拖拽
aLi[i].onmousedown = function (ev) {
var e = ev || window.event;
var iX = e.clientX - this.offsetLeft;
var iY = e.clientY - this.offsetTop;
// 針對低版本的IE，建立透明層
if(this.setCapture) {
this.setCapture();
}
// 添加樣式
this.className = ‘active‘;
var that = this;
document.onmousemove = function (ev) {
var e = ev || window.event;
var iL = e.clientX - iX;
var iT = e.clientY - iY;
that.style.left = iL + ‘px‘;
that.style.top = iT + ‘px‘;
// 判斷是否發生交換位置
for(var j = 0; j < aLi.length; j++) {
if(
aLi[j] !== that // 排除自身
&& that.offsetLeft + that.offsetWidth > aLi[j].offsetLeft + aLi[j].offsetWidth / 2
&& that.offsetTop + that.offsetHeight > aLi[j].offsetTop + aLi[j].offsetHeight / 2
&& that.offsetLeft < aLi[j].offsetLeft + aLi[j].offsetWidth / 2
&& that.offsetTop < aLi[j].offsetTop + aLi[j].offsetHeight / 2
) {
// 交換順序
var temp = aLi[j].index;
aLi[j].index = that.index;
that.index = temp;
// 交換位置
aLi[j].style.left = 10 + (aLi[j].index % 3) * 130 + ‘px‘;
aLi[j].style.top = 10 + Math.floor(aLi[j].index / 3) * 130 + ‘px‘;
break;
}
}
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
// 針對低版本的IE，釋放透明層
if(this.releaseCapture) {
this.releaseCapture();
}
// 去掉樣式
that.className = ‘‘;
// 還原位置
that.style.left = 10 + (that.index % 3) * 130 + ‘px‘;
that.style.top = 10 + Math.floor(that.index / 3) * 130 + ‘px‘;
};
// 阻止瀏覽器的默認行為
return false;
}
}
</script>
</body>
</html>
js拖拽