在可視化的代碼編輯器中, 如Adobe Dreamweaver, Microsoft Expression Web, offeeCup HTML Editor, 可以對各種組件進行隨意的拖拽.
下面這個小程序. 演示了如何使用JavaScript, JQuery 來實現組件的拖拽.
圖1是網頁加載后的界面:
圖1
圖2, 你可以將最下面的組件, 隨意拖拽到任意的一個分類中, 同時每個組件, 也是可以隨意拖拽到其他的組件中:
圖2
程序實現的代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div0 {width:376px;height:500px;padding:10px;border:2px solid #aaaaaa;}
#div1 {width:350px;height:25px;padding:10px;border:1px solid #aaaaaa; text-align:left}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<h1 style="text-align:center"> 詞語分類</h1>
<div id = "div0" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id = "div1">分類1</div><br>
<div id = "div1">分類2</div><br>
<div id = "div1">分類3</div><br>
<div id = "div1">分類4</div><br>
<div id = "div1">分類5</div><br>
<div id = "div1">分類6</div><br>
<button id="dragA" draggable="true" ondragstart="drag(event)"> 水果 </button>
<button id="dragB" draggable="true" ondragstart="drag(event)"> 動物 </button>
<button id="dragC" draggable="true" ondragstart="drag(event)"> 蔬菜 </button>
<button id="dragD" draggable="true" ondragstart="drag(event)"> 玩具 </button>
<button id="dragE" draggable="true" ondragstart="drag(event)"> 蘋果 </button>
<button id="dragF" draggable="true" ondragstart="drag(event)"> 皮球 </button>
<button id="dragG" draggable="true" ondragstart="drag(event)"> 布娃娃 </button>
<button id="dragH" draggable="true" ondragstart="drag(event)"> 小汽車 </button>
<button id="dragI" draggable="true" ondragstart="drag(event)"> 公共汽車 </button>
<button id="dragJ" draggable="true" ondragstart="drag(event)"> 香蕉 </button>
<button id="dragK" draggable="true" ondragstart="drag(event)"> 熊貓 </button>
<button id="dragL" draggable="true" ondragstart="drag(event)"> 狗 </button>
<button id="dragM" draggable="true" ondragstart="drag(event)"> 面包 </button>
<button id="dragN" draggable="true" ondragstart="drag(event)"> 貓 </button>
</div>
</body>
</html>
代碼解釋:
1 創建拖拽容器
程序中創建了div0的容器, 這是個父節點容器, 響應drop和dragover兩個DOM事件. 同時創建了6個div1容器, 這個是子節點容器, 繼承了父節點容器的兩個DOM時間
<div id = "div0" ondrop="drop(event)" ondragover="allowDrop(event)"> <div id = "div1">分類1</div><br> <div id = "div1">分類2</div><br> <div id = "div1">分類3</div><br> <div id = "div1">分類4</div><br> <div id = "div1">分類5</div><br> <div id = "div1">分類6</div><br>
2 創建拖拽組件
這里創建了14個Button組件, 當然也可以創建其他的組件元素, 只需要更改一下類型的名稱就可以了, 如List, text, textarea等等. 這些組件,除了繼承了父節點的drop和dropover相應, 還增加了ondragstart事件的響應. 並且 設置可以拖拽屬性為true( draggable="true").
<button id="dragA" draggable="true" ondragstart="drag(event)"> 水果 </button> <button id="dragB" draggable="true" ondragstart="drag(event)"> 動物 </button> <button id="dragC" draggable="true" ondragstart="drag(event)"> 蔬菜 </button> <button id="dragD" draggable="true" ondragstart="drag(event)"> 玩具 </button> <button id="dragE" draggable="true" ondragstart="drag(event)"> 蘋果 </button> <button id="dragF" draggable="true" ondragstart="drag(event)"> 皮球 </button> <button id="dragG" draggable="true" ondragstart="drag(event)"> 布娃娃 </button> <button id="dragH" draggable="true" ondragstart="drag(event)"> 小汽車 </button> <button id="dragI" draggable="true" ondragstart="drag(event)"> 公共汽車 </button> <button id="dragJ" draggable="true" ondragstart="drag(event)"> 香蕉 </button> <button id="dragK" draggable="true" ondragstart="drag(event)"> 熊貓 </button> <button id="dragL" draggable="true" ondragstart="drag(event)"> 狗 </button> <button id="dragM" draggable="true" ondragstart="drag(event)"> 面包 </button> <button id="dragN" draggable="true" ondragstart="drag(event)"> 貓 </button>
3 拖拽事件響應函數
響應函數有三個, 這里用到了JQuary DOM技術, 查找和設置文檔元素.
// 防止拖拽過程中,有其他的響應事件發生
function allowDrop(ev) { ev.preventDefault(); } // 開始拖拽時, 將元素的ID保存到Text中 function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } //拖拽結束, 講拖拽元素放到拖拽區域對象的子節點中. function drop(ev) { var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.preventDefault(); }
4 拖拽過程中, 改變了元素組的繼承關系
如圖2中, 分類2 是動物, 動物中有包含了熊貓, 狗, 貓.