我的網(wǎng)站下有幾大板塊，板塊的左上方有一個(gè)移動(dòng)按鈕，請(qǐng)問如何實(shí)現(xiàn)可以拖拽div里的一個(gè)圖片使得整個(gè)div移動(dòng)，drop后自動(dòng)整理新的界面？ 如下圖：操作：在div 5 左上方的點(diǎn)點(diǎn)位置點(diǎn)擊(drag)拖動(dòng)到div 3的位置后放手（drop）。希望的結(jié)果：div3和div5 交換，或者div5替換了div3的位置，之后的按順序排列。請(qǐng)大神越詳細(xì)越好，最好有例子或者范例。
1 回答
12345678_0001
TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊
拖放（Drag 和 drop）是 HTML5 標(biāo)準(zhǔn)的組成部分。
瀏覽器支持:Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
被拖元素，dragElement :
(1)添加事件：ondragstart
(2)添加屬性：dragable
放置元素，dropElement:
1、添加事件：ondargenter , ondragover , ondragleave , ondragend ,ondrop
和mouser劃入劃出一類的事件很類似，字面也很好理解，不贅述了，下面會(huì)用例子來說明。
2、頁面上元素間的拖放
下面用個(gè)小例子，div間的拖放來展示，各個(gè)事件如何被觸發(fā)：
系統(tǒng)中選擇的一個(gè)或多個(gè)文件拖入該div中，files中會(huì)存儲(chǔ)拖入文件的信息，然后我們通過file可以得到文件的類型，長度，內(nèi)容然后實(shí)現(xiàn)上傳。
3、setDragImage(image, x, y)用于設(shè)置鼠標(biāo)移動(dòng)過程中隨鼠標(biāo)一起移動(dòng)的效果圖。必須在dragstart中設(shè)置。
4、types,effectAllowed和dropEffect分別是拖入元素的類型，拖拽過程中鼠標(biāo)顯示的樣式，不過通常可以忽略這幾個(gè)屬性，一般用不到。
添加回答
舉報(bào)
0/150
提交
取消