JS拖拽事件后保存效果

[Oliver_Ye]

我想实现的功能是：
1. 可以拖拽表格里的任何一行（表格数据通过XML读取）。
2. 即时保存当前页面的布局效果。

现在拖拽表格的效果已经实现，我不知道该怎么做第二步，“即时保存当前页面的布局效果。”

我把第一步的代码给大家看下，大家帮我参谋参谋这个问题，非常谢谢

// JavaScript Document
Number.prototype.NaN0=function(){return isNaN(this)?0:this;}
var iMouseDown  = false;
var dragObject  = null;
var curTarget   = null;

function makeDraggable(item){
	if(!item) return;
	item.onmousedown = function(ev){
		dragObject  = this;
		mouseOffset = getMouseOffset(this, ev);
		return false;
	}
}

function getMouseOffset(target, ev){
	ev = ev || window.event;

	var docPos    = getPosition(target);
	var mousePos  = mouseCoords(ev);
	return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e){
	var left = 0;
	var top  = 0;
	while (e.offsetParent){
		left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
		top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
		e     = e.offsetParent;
	}

	left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
	top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

	return {x:left, y:top};

}

function mouseCoords(ev){
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	};
}

function mouseDown(ev){
	ev         = ev || window.event;
	var target = ev.target || ev.srcElement;

	if(target.onmousedown || target.getAttribute('DragObj')){
		return false;
	}
}

function mouseUp(ev){

	dragObject = null;

	iMouseDown = false;
}


function mouseMove(ev){
	ev         = ev || window.event;

	/*
	We are setting target to whatever item the mouse is currently on

	Firefox uses event.target here, MSIE uses event.srcElement
	*/
	var target   = ev.target || ev.srcElement;
	var mousePos = mouseCoords(ev);

	if(dragObject){
		dragObject.style.position = 'absolute';
		dragObject.style.top      = mousePos.y - mouseOffset.y;
		dragObject.style.left     = mousePos.x - mouseOffset.x;
	}

	// track the current mouse state so we can compare against it next time
	lMouseState = iMouseDown;

	// this prevents items on the page from being highlighted while dragging
	if(curTarget || dragObject) return false;
}

document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup   = mouseUp;

window.onload = function() {

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.load("Bookmark_test.xml")
var x=xmlDoc.getElementsByTagName("Node");

for(i=0;i<x.length;i++){
    makeDraggable(document.getElementById("tr_book_table_All_Bookmarks_"+i+""));
}

}

[Oliver_Ye]

求助~~

[浴火_凤凰]

顶一下啊！！！

[Oliver_Ye]

求助~~

[jol_boy]

当你离开页面时，或者每拖动一次之后，就像当前的表格排序位置通过ajax方式提交到后台，分析处理后进行保存！建议最好是离开页面时进行保存，节省点资源!每拖动一次保存一次，太耗资源