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  
**/ 
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事件。如果能改变拖拽的监控事件范围，或者把单独的click事件移出去，问题就可以解决。

    好在mootools Sortables提供了handle的选项，能指定拖拽监控事件范围，下面就来看下Sortables.handle选项。

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

    handle选项可以接受一个元素作为拖动的控制器。如果你要保持你的列表中的文本可以被选中或者保留li的其他行为，使用这个参数则非常方便。默认参数为false则会使得整个元素（li）成为控制器。

    在本例中可以指定handle为序号列，把sortables的监控事件设置在序号列上，从而避免事件冲突。

    例如：

[html]
var dragSort = new Sortables('sortables', { 
  handle  : ".sortHandel", 
    onStart : function (element, clone) { 
        element.setStyle('background-color', 'red'); 
    } 
; 
 

    通过看mootools Sortables的JS源码，就更明了mootools是怎么做的了，下面是Sortables的JS片段，在addItems方法中指定了监控mouseDown事件。

[html]
addItems: function(){ 
    Array.flatten(arguments).each(function(element){ 
        this.elements.push(element); 
        var start = element.retrieve('sortables:start', function(event){ 
            this.start.call(this, event, element); 
        }.bind(this)); 
        (this.options.handle ? element.getElement(this.options.handle) || element : element).addEvent('mousedown', start); 
    }, this); 
    return this; 
}, 
    可以看出，如果你指定了handle的话，则把mouseDown事件设置在handle元素上，否则为整个element。

    还有很多Sortables提供的选项，在此就不多说了，感兴趣的可以自己去研究下。

 结语：

         整个事情下来，最大的感受就是“佩服”。佩服mootools Sortables在设计上的完善，当你遇到一个问题，后来发现别人已经考虑到了并为你提供了一个选项，此时唯有钦佩。向来词穷的我，找不到适合表述的话了，只希望将来自己弄的东西也能像那样，让人觉得为他多考虑了一步。