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.zzzyk.com
**/
window.addEvent('domready', function(){
    var dragSort = new Sortables('sortables', {
        onStart : function (element, clone) {
        element.setStyle('background-color', 'red');
    },

    onSort : function (element, clone) {
        element.setStyle('background-color', 'blue');
    },

    onComplete : function (element) {
        element.setStyle('background-color', '');
        var cardIdStr = dragSort.serialize();

        //后台更新采集卡显示顺序
        url = "../smc/SortCaputureCards.do?cardIdStr=" + cardIdStr;
        new Request.JSON({
                url:url,
                onComplete:function(result, text){
                     if("good" == result.message) {
                        jumpPage(<c:out value="${page.pageNo}"/>); //跳转刷新当前页
                     }else {
                        alert(result.message);
                     }
                }
        }).send();
    }

});

});
    以上指定<TBODY> 'sortables' 为拖拽的对象，对其中的<TR>进行拖拽。顺便添加onStart(), onSort(), onComplete()等方法完成选中变色、更新后台数据等操作。其中Sortables.serialize(); 能列出当前顺序的ID串，本例中使用该字串交由后台方法更新相应记录用。

完成以上操作后，页面上也能进行拖拽了，原以为就了事了。不过后来发现点击“删除”的时候，后台也删除了相应记录，但是页面没有刷新；更可恶的是有的时候拖拽完成后，页面也没刷新。

二：页面刷新问题原因初探

进过一番测试后，初步的结论是页面的事件由冲突。在Sortables对象中指定拖拽对象为"sortables"，默认会监控整个<TBODY>区域内的mouseDown事件。而“删除”按钮又单独定义了click事件。当点击“删除”时，Sortables里的事件要执行，而删除绑定的delete事件也要执行。具体来说就是"onComplet()"和"deleteWorkStation"都要执行，而两者都有一个执行刷新的ajax回调方法。IE的具体执行顺序我不清楚，就表现来看两者有冲突，不清楚哪个回调方法就没执行。

初步定为问题的原因是页面绑定事件由冲突，具体就是Sortables监控的事件范围覆盖了里头<TD>上的click事件。如果能改变拖拽的监控事

补充：web前端 , JavaScript ,