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

题记：

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

 

摘要：

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

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

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

 

正文：

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

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

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

<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的动作。

/**
* 删除工作站-采集卡
**/
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对象，一些拖拽时的动作，例如选中变色等。大体代码如下：

 

/**
* 设置拖拽排序
**/
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的监控事件设置在序号列上，从而避免事件冲突。

    例如：

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

 

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

	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在设计上的完善，当你遇到一个问题，后来发现别人已经考虑到了并为你提供了一个选项，此时唯有钦佩。向来词穷的我，找不到适合表述的话了，只希望将来自己弄的东西也能像那样，让人觉得为他多考虑了一步。

 

参考文献：

       1：mootools Sortables demos http://mootools.net/demos/?demo=Sortables

       2：mootools 1.2 整理排序类介绍 http://www.xingzai.org/mootools-note/mootools-1-2-class-sortables-sort-of-finishing.html