WEB前端實例，JS實現(xiàn)拖拽效果

問已知，小方塊e.clientY , e.eclientX

鼠標(biāo)e.offsetX , e.offsetY，求計算div的top和left ？

解：

小方塊top = e1.clientX - e2.offsetX

小方塊left = e1.clientY - e2.offsetY

問，如何防止小方塊超出DIV邊界？

解：

第一步，計算可移動_h和_w

小方塊可移動_h = 窗口內(nèi)高度 - 小方塊高度

小方塊可移動_w = 窗口內(nèi)高度 - 小方塊高度

第二步，超出邊界，重新賦值

小方塊超出上邊界時，計算得小方塊top為負(fù)數(shù)，重新賦值為0；小方塊超出下邊界時，計算得小方塊top大于_h，重新賦值為_h；

小方塊超出左邊界時，計算得小方塊left為負(fù)數(shù)，重新賦值為0；小方塊超出右邊界時，計算得小方塊left大于_w，重新賦值為_w；