- 不能拖曳資料到已含有其他拖曳物件(div)的td
- 某些td不可以被放置拖曳物件(div)
接著我們先來看head區塊的程式碼
接下來我們來看body區塊的程式碼
下圖是網頁呈現畫面
下圖為拖曳時的畫面
更多詳細資料請參閱底下連結
http://www.redips.net/javascript/drag-and-drop-table-content/
<head>
<title></title>
<style type="text/css">
.v_title_cell{width:20px; text-align:center; vertical-align:middle}
.content{width:58px; height:58px; margin:auto; border-style:none; border-width:0px; color:White}
.cell{width:60px; height:60px; text-align:center; vertical-align:middle}
</style>
<script type="text/javascript" src="drag-min.js"></script>
<script type="text/javascript">
window.onload = function () {
rd = REDIPS.drag; // reference to the REDIPS.drag class
// initialization
rd.init();
// set hover color
rd.hover_color = '#9BB3DA';
// this function (event handler) is called after element is dropped
REDIPS.drag.myhandler_dropped = function () {
}
}
</script>
</head>
在head區塊裡有二個地方是一定要撰寫的，第一個是加入drag-min.js檔案，可以點選這裡下載，下載後解壓縮可以在REDIPS_drag目錄下看到redips-drag.js及redips-drag-min.js檔案，擇一引用即可，目前我是引用redips-drag-min.js檔案並將它改名為drag-min.js，另一個要撰寫的是在window.onload事件裡撰寫REDIPS.drag物件的建立及初始，在上面範例有個myhandler_dropped事件，它是指進行拖曳完成後(無論最後是否有改變位置)要引發什麼，更詳細的說明請參考線上文件。接下來我們來看body區塊的程式碼
<body>
<div id="drag">
<table style="text-align:center; width:260px; margin:auto" border="1">
<tr>
<td class="mark"></td>
<td class="mark">1</td>
<td class="mark">2</td>
<td class="mark">3</td>
</tr>
<tr>
<td class='v_title_cell mark'>2</td>
<td class="cell single">
<div class="content drag" style="background-color:Red">紅</div>
</td>
<td class="cell single"></td>
<td class="cell single"></td>
</tr>
<tr>
<td class='v_title_cell mark'>3</td>
<td class="cell single">
<div class="content drag" style="background-color:Blue">藍</div>
</td>
<td class="cell single"></td>
<td class="cell single"></td>
</tr>
<tr>
<td class='v_title_cell mark'>4</td>
<td class="cell single">
<div class="content drag" style="background-color:Green">綠</div>
</td>
<td class="cell single"></td>
<td class="cell single"></td>
</tr>
</table>
</div>
</body>
body區塊有幾個地方要注意的- table必須放在id名稱為drag的div裡
- 如果td不允許放置拖曳物件(div)則class要加上mark
- 如果td只允許放置一個拖曳物件(div)則class要加上single
- 如果div要成為可拖曳的物件必須在class加上drag
下圖是網頁呈現畫面
下圖為拖曳時的畫面
更多詳細資料請參閱底下連結
http://www.redips.net/javascript/drag-and-drop-table-content/
沒有留言:
張貼留言