最近學到了js中的事件，感覺和windows的事件佇列和處理函式很相似哈。需要監聽事件然後要有處理事件的函式。然後做了乙個小練習，元素的拖放。廢話不說了，上效果。實現子元素任意框拖放。
首先在布局上，三個大盒子中的元素都是絕對定位於他們的父元素，給三個大盒子相對定位。上html和css**。
"cnt"
>
>
>
1span
>
>
2span
>
div>
>
>
3span
>
>
4span
>
div>
>
>
5span
>
>
6span
>
div>
div>
以上是html**，比較簡單。css布局如下：
*
#cnt>div
#cnt>div>span
由於子元素的布局放在js中實現，所以子元素疊在一起，最關鍵的js**如下：
var nthpar = document.("#cnt>div");
//所有的父元素。相容不太好，最好用谷歌開啟
var nthchild = document.
queryselectorall
("#cnt span");
function
addevent()
;})(i)
;//閉包新增事件，主要是儲存num的私有}}
function
sortchild()
}}addevent()
;//初始化每個子元素新增事件
sortchild()
;//初始化布局每個盒子子元素
var drag =
true
;//判斷拖放狀態
function
begaindrag
(num)
window.
onmouseup
=function()
//state主要是判斷被拖放的方向，左or右。根據位移left的正負判斷
console.
log(
"進入相隔");
var nod = nthchild[num]
.clonenode
(true);
//拷貝被拖放元素
par.
removechild
(nthchild[num]);
//從原始父元素移除被拖放元素
state==
1&& par.nextelementsibling.nextelementsibling.
(nod)
;//根據方向可以判斷唯一的被放置的盒子
state==
0&& par.previouselementsibling.previouselementsibling.
(nod)
; isout =
false;}
else
if(math.
abs(
(nthpar[k]
.offsetleft - nthchild[num]
.offsetparent.offsetleft)/2
)abs(nthchild[num]
.offsetleft)
) console.
log(
"進入相鄰"
+nthchild[num]
.offsetleft)
;var nod = nthchild[num]
.clonenode
(true);
par.
removechild
(nthchild[num]);
state==
1&& par.nextelementsibling.
(nod)
; state==
0&& par.previouselementsibling.
(nod)
; isout =
false;}
}}} drag =
false
;//若是沒有拖拽成功不再響應mousemove的事件
sortchild()
;//拖放完成後重新排列。如果沒有拖出去，重新排列後會回到原位置
addevent()
;//重新對子元素新增事件}}
如圖可以實現簡單的拖放。但是對於越界，和諸多的細節沒有更進一步處理。比如第乙個盒子中的元素往左移動，會出現訪問不到的越界錯誤。也沒有對高度進行進一步的限制。只是給大家提供下思路，希望能幫助到在路上的朋友們(≖ᴗ≖)✧。
原生js實現簡單的模態框
html部分 顯示大圖 js部分 var btn document.getelementbyid showmax var mtclose document.getelementsbyclassname mtclose 0 var modalbox document.getelementbyid mo...
原生js實現簡單動畫效果
實現動畫效果可以用jquery提供的animate方法，或一些外掛程式來實現，但是隨著前端元件化開發的流行，jquery大量的dom操作已經顯得十分多餘，正在逐漸從前端技術棧中被淘汰，下面我們使用原生js實現簡單的勻速動畫效果和緩動效果 勻速動畫實現水平移動 css樣式 box line400 li...
原生js做列印功能的簡單實現
在需要列印的地方前後加上 function mypringt bdhtml window.document.body.innerhtml 獲取當前頁的html sprnstr 設定列印開始區域 eprnstr 設定列印結束區域 prnhtml bdhtml.substring bdhtml.inde...