實現步驟
html+bootstrap布局畫3個面板。
注：面板樣式position屬性必須是絕對位置或者相對位置。
監聽面板的的mousedown事件。
記錄當前對應面板的位置target_index，設定面板透明拖動。
監聽當前被拖動的面板的mousemove事件。
根據滑鼠移動的位置和面板的相對位置計算出面板應該出現的新位置，就將面板位置設定為新位置。
監聽當前被拖動的面板的mouseup事件。
當鬆開滑鼠時，檢視當前滑鼠所在位置對應的面板的位置exchange_index。對比兩個位置，若不一樣，說明需要交換這兩個位置對應的面板內容，否則直接使被拖動面板回原位即可。
原始碼html**：
panel content
panel footer
panel content
panel footer
panel content
panel footer
#panelsbox>div>.panel/**
* 拖拽面板 到某個面板的位置，交換兩個面板位置
* 若沒有到任意乙個面板位置，則被拖拽面板回原位置
*/$(function()); //設定面板元素新位置
}).mouseup(function(e));
//交換data-index
$("#devicelist").children("div[data-index=" + target_index + "]")
attr("data-index",exchange_index);
$(document.elementfrompoint(e.pagex,e.pagey)).parents(".panel").parent()
.attr("data-index",target_index);
}else);
}}else);
}});
});});
JQuery 操作DOM元素
使用attr 方法控制元素的屬性 使用attr 屬性名 是獲取該屬性的值。使用attr 屬性名 屬性值 是設定屬性的值 html text 方法控制元素的文字 包含樣式 使用html 時是獲取元素的html文字 包括樣式 如果文字是斜體的，獲取到的也是斜體的 使用html 哈哈哈 時是將元素的htm...
實現 元素 可拖拽
css部分 body drag item html部分 drag item div js部分 var dragitem document.getelementsbyclassname drag item 0 var divx,divy,startmou startmousey,endmou endm...
jquery實現拖拽以及jquery監聽事件的寫法
我先不對監聽事件做解釋，我們先來看下jquery的一些寫法吧！我們最常用的是jquery的css 方法，相信大家都會用！假如用css設定乙個屬性，我們寫法如下 haorooms css width 100px 假如多個屬性呢？我們寫法如下 demo css 把他們放到乙個物件裡面！看了上面的例子，大...