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 ,