mootools页面拖拽排序，事件冲突处理

题记：

        最近有看过一些JS方面的东西，项目使用mootools 的Sortables实现了页面拖拽排序的功能，期间遇到排序子项响应事件触发冲突的问题。其实Sortables设计的时候已经考虑事件冲突的问题，提供了handle属性注册具体事件监控对象，从而可以规避监控事件的冲突。本文在此记录下，望相互交流。

摘要：

    一：拖拽排序初步实现——使用mootools Sortables

    二：页面刷新问题原因初探——事件冲突

    三：Sortables.handle提供的处理方法

正文：

        一：拖拽排序初步实现——使用mootools Sortables

          假设如下的拖拽页面（见图picture_1），对一个<TBODY>内的<TR>做为拖拽的实体，而<TR>上的列<TD>可能也需要处理一些click事件（例如“删除”动作什么的）。

页面采用table包装，具体拖拽元素放置于<TBODY>中，在此就不详细描述，大概形式如下：

[html]
<tbody id="sortables"> 
        <tr> 
            <td>显示列1</td> 
            <td>显示列2</td> 
            <td>显示列3</td> 
            <td>显示列4</td> 
            <td>显示列5</td> 
            <td style="width:12%"><input type="button" value="删除" onClick="deleteWorkStation(element)"></td> 
        </tr> 
</tbody> 
       最后一列绑定一个“删除”按钮，需要绑定onClick事件执行delete的动作。

[html]
/** 
* 删除工作站-采集卡 
**/ 
function deleteWorkStation(cardID, stationID) { 
    if(confirm("您确定要删除该工作站采集卡?")){ 
        url = "../smc/SmcCaptureWorkStationDelete.do?cardID=" + cardID + "&stationID=" + stationID; 
        new Request.JSON({ 
                url:url, 
                onComplete:function(result, text){ 
                     if("删除成功！" != result.message) 
                        alert(result.message); 
                     document.mainForm.submit(); //刷新页面 
                } 
        }).send(); 
    } 
} 
 

         mootools提供了Sortables可以很容易的实现页面上的拖拽排序，具体需要注册domready事件，实例化 Sortables对象。可指定被拖拽的dom对象，一些拖拽时的动作，例如选中变色等。大体代码如下：

[html]
/** 
* 设置拖拽排序 www.2cto.com  
**/&n