範圍內的拖拽事件

2022-02-17 14:42:48 字數 2359 閱讀 8473

// 粉色div在 父級div 範圍內拖拽,不能移動出div範圍

// 1,先實現拖拽

// 獲取標籤物件

var obox = document.queryselector('.box');

var oinner = document.queryselector('.inner');

// 獲取父級標籤,margin-left 和 border-left 佔位

// 當前不是通過 style 獲採樣式屬性

// 是通過 getcomputedstyle 獲採樣式屬性

// 支援 marginleft  和  margin-left 

// margin-left 屬性值

var ml = parseint(mygetstyle(obox, 'margin-left'));

// margin-top 屬性值

var mt = parseint(mygetstyle(obox, 'margintop'));

// border-left-width 寬度

var bl = parseint(mygetstyle(obox, 'border-left-width'));

// border-top-width 寬度

var bt = parseint(mygetstyle(obox, 'border-top-width'));

// 獲取inner, div標籤的相關資料

var hs = oinner.offsetheight;

var ws = oinner.offsetwidth;

// 獲取obox, div標籤的相關資料

var hf = obox.clientheight;

var wf = obox.clientwidth;

// 滑鼠按下,給滑鼠移動新增 事件處理函式

oinner.addeventlistener('mousedown', function () )

// 滑鼠抬起,給滑鼠移動刪除 事件處理函式

document.addeventlistener('mouseup', function () )

function mymove(e) 

if(l < 0)

if(t > hf - hs)

if(l > wf - ws)

oinner.style.top = t  +  'px';

oinner.style.left = l  + 'px';

}// 總結:

// 1,因為頁面有可能滾動,獲取的資料必須是針對頁面的座標

//   獲取滑鼠座標,需要是 e.pagex  e.pagey

// 2,需要提前獲取到標籤的相關資料

//   父級 : 內容(寬高) + padding 的佔位

//          左 上 的 margin 和 border 佔位 

//   子級 : 內容(寬高) + padding + border 的佔位

//          內容(寬高) + padding 的佔位

//   最好定義在 函式值外,先獲取好資料

// 3, 除了 觸發 滑鼠按下事件效果,必須在 inner,div 範圍內

//    其他 事件的觸發,都有可能在 inner,div範圍外,必須要給 document 做繫結

// 4, mousemove 必須以函式名稱的形式,繫結事件處理函式

//    當 滑鼠抬起時,才能執行刪除事件處理函式

// 5, left定位數值 : 

//        滑鼠座標 - obox,div的左外邊距 - obox,div的左邊框寬度 - inner,div寬度的一半

// 6, top定位數值:

//        滑鼠座標 - obox,div的上外邊距 - obox,div的上邊框寬度 - inner,div高度的一半

// 7, 設定極值:

//        當前定位使用的是絕對定位 absolute

//    最小值 : 0   0

//    最大值 : obox,div,內容(寬高)+padding佔位 - oinner,div, 內容(寬高)+padding+border佔位   

獲取滑鼠的座標, offset   client  page

offset : 拖拽時,因為座標原點的改變,造成div,來回閃爍

點選時可以使用

client : div 使用 fixed 固定定位時 , 使用 client

都是 視窗視窗的左上角

page   :div 使用 absolute 絕對定位

定位原點的左上角是 父級標籤的左上角

與視窗視窗的左上角不一定重合

只能使用 page 座標

lucene RangeQuery範圍內搜尋

queryparser可以使用 起始 to 終止 表示式,起始 to 終止 表示式來構造rangequery物件。private term begin,end begin new term pubmonth 201001 end newterm pubmonth 201501 rangequery ...

執行緒範圍內共享資料

我們可以先用所學知識來寫乙個 public class threadscopesharedata start static class a static class b 如果光像上面這樣寫的話,那毫無疑問,肯定是有問題的,如下圖所示並沒有實現執行緒共享 此時就實現執行緒內共享資料了 public c...

MySQL日期範圍內查詢

1,查詢當天 今天 的資料 select from order where to days order time to days now 2,查詢昨天的資料 select from order where to days now to days order time 13,查詢最近7天的資料 包括今...