德国牛人的"Drag'nDrop & DHTML Library"发现一个BUG

这几天在用那个德国牛人的"Drag'nDrop & DHTML Library"

当container滚动后,就无法获取正确的对象了.因为作者好像是根据鼠标坐标来决定当前拖动的对象.我email给作者,回复是:"Draggable elements within scrollable DIVs aren't supported.".但是我想这个应该不是问题.至少在特定的情况用特定的方法是可以解决的.

<STYLE type=text/css> #NewLayer1,#NewLayer2{ POSITION: absolute; font: 10px verdana; border:1px solid #CCCCCC; background-color:#f2f2f2; padding:4px; height:200px; width:200px; left:100px; } #NewLayer1{ top:0px; } #NewLayer2{ top:200px; } #container{ POSITION: absolute; top:100px; left:100px; width:500px; height:300px; overflow:scroll; background-color:#FF6600; } body{ margin:0px; } </STYLE> <BODY onload=init()> <SCRIPT src="wz_dragdrop.js" type=text/javascript></SCRIPT> <div id="container"> <div id="NewLayer1"> haha </div> <div id="NewLayer2"> haha </div> </div> <script langauge="javascript"> function init(){ SET_DHTML(CURSOR_MOVE,"NewLayer1"+TRANSPARENT+RESIZABLE,"NewLayer2"+TRANSPARENT+RESIZABLE); } </script>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

续:
修改wz_dragdrop.js:

function PICK(d_ev)
{
	////modify by allinhands
	var scrollTopfix = document.getElementById("cont").scrollTop;
	var scrollLeftfix = document.getElementById("cont").scrollLeft;
	////modify by allinhands

	dd.e = new dd.evt(d_ev);
	if(dd.e.x >= dd.getWndW()+dd.getScrollX() || dd.e.y >= dd.getWndH()+dd.getScrollY()) return true; // on scrollbar
	var d_o, d_t, d_cmp = -1, d_i = dd.elements.length; while(d_i--)
	{
		d_o = dd.elements[d_i];
		if(dd.n4 && dd.e.but > 1 && dd.e.src == d_o.oimg && !d_o.clone) return false;
		////original  code
		//if(d_o.visible && dd.e.but <= 1 && dd.e.x >= d_o.x && dd.e.x <= d_o.x+d_o.w && dd.e.y >= d_o.y && dd.e.y <= d_o.y+d_o.h)
		////original  code

		///modify by allinhands
		if(d_o.visible && dd.e.but <= 1 && dd.e.x >= d_o.x-scrollLeftfix && dd.e.x <= d_o.x-scrollLeftfix+d_o.w && dd.e.y >= d_o.y-scrollTopfix && dd.e.y <= d_o.y-scrollTopfix+d_o.h)
		////modify by allinhands
		{
			if(d_o.z > d_cmp && (d_t = dd.e.src.tag).indexOf('inpu') < 0 && d_t.indexOf('texta') < 0 && d_t.indexOf('sele') < 0 && d_t.indexOf('opti') < 0 && d_t.indexOf('scrol') < 0)
			{
				d_cmp = d_o.z;
				dd.obj = d_o;
			}
		}
	}
	...以下省略...
}

scrollTopfix和scrollLeftfix是根据父容器的滚动获得的差值.当然这样写在这个函数里面是不文明的.可以在外层控制.而且这样也没有考虑外面还有一个或者多个滚动的DIV的情况.我想用一个recursion应该可以解决.

PS:我对于各种相对绝对坐标等等比较晕.不知道这个修改有什么不正确的地方
示例:http://www.tpp8.com/download/d_modify.htm

10-31日再续:
又发现了另外一个BUG,还是滚动的DIV中出现的.
如上例,拖动到下面或者右边一定的高度时,无法继续拖动.原因是坐标已经超出document的高度或者宽度范围.
再次修改:

dd.inWndW = function(d_x, d_y)
{
	var scrollLeftfix = document.getElementById("cont").scrollLeft;
	var d_wx = dd.getScrollX()+scrollLeftfix,
	d_ww = dd.getWndW();
	return(
		((d_y = d_wx+2)-d_x > 0) || ((d_y = d_wx+d_ww+dd.obj.w-2)-d_x < 0)? d_y
		: d_x
	);
};
dd.inWndH = function(d_x, d_y)
{
	var scrollTopfix = document.getElementById("cont").scrollTop;
	var d_wy = dd.getScrollY()+scrollTopfix,
	d_wh = dd.getWndH();
	return(
		((d_y = d_wy+2)-d_x > 0) || ((d_y = d_wy+d_wh+dd.obj.h-2)-d_x < 0)? d_y
		: d_x
	);
};

情况看起来是解决了
当然还是上面的话,可以有更合理的方法处理的

缺缺发表于 2005-10-31　 [所属栏目：JScript | 返回首页]