JS中draggable怎么使用委托delegate

[脸大无敌]

页面需求在拖动了draggable后刷新局部页面，但是刷新后绑定的拖拽方法失效，在网上搜索出来用委托应该可以实现，现在试了很多次都没办法，求大神帮忙看下代码怎么写大神们帮帮忙放了DIV定义和JavaScript里draggable方法的图


顺便附上draggable方法代码

var plan={};		

			$(".dragItem").draggable({
				//containment: "parent",
				//axis: "x",
				cursor: "move",
				grid: [ 30, 31 ],
				stop: function(data,data1) {
					plan={
							"planId":$(this).attr("id").replace("plan",""),
							"begin":data1.position.left
						 }
					var zj = data1.helper;
					if(data1.position.left<-2){
						zj.css('left',-2);
					}else{
  						zj.css('left',data1.position.left)
					};
					UpdateData();
		      	}
			});
			//})
			function UpdateData(){
				$.ajax({  
	                type : 'post',  
	                url : 'servlet/MyServlet', 
	                data : JSON.stringify(plan), 
	                //dataType : 'json',   
	                //contentType:"application/json;charset=utf-8", 
	                success : function (data) {  
	                	//location.reload();
	                	//reloadDIV();
	                	$("#MYDIV").load("tz.jsp");
	                },  
	                error : function () { 
	                }  
	            });
			};

[脸大无敌]

引用 3 楼 lqlqlq007 的回复:

			$(".dragItem").draggable({
				//containment: "parent",
				//axis: "x",
				cursor: "move",
				grid: [ 30, 31 ],
				stop: function(data,data1) {
					plan={
							"planId":$(this).attr("id").replace("plan",""),
							"begin":data1.position.left
						 }
					var zj = data1.helper;
					if(data1.position.left<-2){
						zj.css('left',-2);
					}else{
  						zj.css('left',data1.position.left)
					};
					UpdateData();
		      	}
			});
			//})
			function UpdateData(){
				$.ajax({  
	                type : 'post',  
	                url : 'servlet/MyServlet', 
	                data : JSON.stringify(plan), 
	                //dataType : 'json',   
	                //contentType:"application/json;charset=utf-8", 
	                success : function (data) {  
	                	//location.reload();
	                	//reloadDIV();
	                	$("#MYDIV").load("tz.jsp");
                               $(".dragItem").draggable({
				//containment: "parent",
				//axis: "x",
				cursor: "move",
				grid: [ 30, 31 ],
				stop: function(data,data1) {
					plan={
							"planId":$(this).attr("id").replace("plan",""),
							"begin":data1.position.left
						 }
					var zj = data1.helper;
					if(data1.position.left<-2){
						zj.css('left',-2);
					}else{
  						zj.css('left',data1.position.left)
					};
					UpdateData();
		      	}
			});
	                },  
	                error : function () { 
	                }  
	            });
			};

在你局部更新请求成功以后重新执行一次draggable，大概是这样吧，你自己再调一下。

试了这个办法 局部刷新后方法依然失效

[讨厌走开啦]

2个调试方案：

1.看下执行$("#MYDIV").load("tz.jsp");是否是异步的；
2.断点看下UpdateData里的draggable绑定动作是否成功。

[脸大无敌]

引用 5 楼 lqlqlq007 的回复:

2个调试方案： 1.看下执行$("#MYDIV").load("tz.jsp");是否是异步的； 2.断点看下UpdateData里的draggable绑定动作是否成功。

1.是否异步是什么意思 2.绑定方法是能够绑定成功的，但是局部刷新依然失效

[讨厌走开啦]

$("#MYDIV").load("tz.jsp"); 执行这句对应你说的局部刷新吧？那就在$(".dragItem").draggable这里打个断点，如果走到断点的时候局部刷新的页面还没刷出来，那就是异步的，如果刷出来，就是同步的。

[脸大无敌]

引用 7 楼 lqlqlq007 的回复:

$("#MYDIV").load("tz.jsp"); 执行这句对应你说的局部刷新吧？那就在$(".dragItem").draggable这里打个断点，如果走到断点的时候局部刷新的页面还没刷出来，那就是异步的，如果刷出来，就是同步的。

测试之后确认是异步的

[讨厌走开啦]

引用 8 楼 qq_25092367 的回复:

引用 7 楼 lqlqlq007 的回复:

$("#MYDIV").load("tz.jsp"); 执行这句对应你说的局部刷新吧？那就在$(".dragItem").draggable这里打个断点，如果走到断点的时候局部刷新的页面还没刷出来，那就是异步的，如果刷出来，就是同步的。

测试之后确认是异步的

那你必须等$("#MYDIV").load("tz.jsp");执行完了以后再执行draggable绑定动作。

写个定时器或者回调什么的处理一把就可以搞定了。

[脸大无敌]

引用 9 楼 lqlqlq007 的回复:

引用 8 楼 qq_25092367 的回复:

[quote=引用 7 楼 lqlqlq007 的回复:] $("#MYDIV").load("tz.jsp"); 执行这句对应你说的局部刷新吧？那就在$(".dragItem").draggable这里打个断点，如果走到断点的时候局部刷新的页面还没刷出来，那就是异步的，如果刷出来，就是同步的。

测试之后确认是异步的

那你必须等$("#MYDIV").load("tz.jsp");执行完了以后再执行draggable绑定动作。 写个定时器或者回调什么的处理一把就可以搞定了。[/quote] 看样子又要去学习回调了，真的是每一步都要百度，哎~

[讨厌走开啦]

页面局部刷新后你需要重新执行一次拖拽事件的绑定。

[脸大无敌]

引用 1 楼 lqlqlq007 的回复:

页面局部刷新后你需要重新执行一次拖拽事件的绑定。

能给我贴个代码嘛，我试了draggable绑定，ready绑定，但是都不对

[讨厌走开啦]

			$(".dragItem").draggable({
				//containment: "parent",
				//axis: "x",
				cursor: "move",
				grid: [ 30, 31 ],
				stop: function(data,data1) {
					plan={
							"planId":$(this).attr("id").replace("plan",""),
							"begin":data1.position.left
						 }
					var zj = data1.helper;
					if(data1.position.left<-2){
						zj.css('left',-2);
					}else{
  						zj.css('left',data1.position.left)
					};
					UpdateData();
		      	}
			});
			//})
			function UpdateData(){
				$.ajax({  
	                type : 'post',  
	                url : 'servlet/MyServlet', 
	                data : JSON.stringify(plan), 
	                //dataType : 'json',   
	                //contentType:"application/json;charset=utf-8", 
	                success : function (data) {  
	                	//location.reload();
	                	//reloadDIV();
	                	$("#MYDIV").load("tz.jsp");
                               $(".dragItem").draggable({
				//containment: "parent",
				//axis: "x",
				cursor: "move",
				grid: [ 30, 31 ],
				stop: function(data,data1) {
					plan={
							"planId":$(this).attr("id").replace("plan",""),
							"begin":data1.position.left
						 }
					var zj = data1.helper;
					if(data1.position.left<-2){
						zj.css('left',-2);
					}else{
  						zj.css('left',data1.position.left)
					};
					UpdateData();
		      	}
			});
	                },  
	                error : function () { 
	                }  
	            });
			};

在你局部更新请求成功以后重新执行一次draggable，大概是这样吧，你自己再调一下。

[脸大无敌]

引用 9 楼 lqlqlq007 的回复:

引用 8 楼 qq_25092367 的回复:

[quote=引用 7 楼 lqlqlq007 的回复:] $("#MYDIV").load("tz.jsp"); 执行这句对应你说的局部刷新吧？那就在$(".dragItem").draggable这里打个断点，如果走到断点的时候局部刷新的页面还没刷出来，那就是异步的，如果刷出来，就是同步的。

测试之后确认是异步的

那你必须等$("#MYDIV").load("tz.jsp");执行完了以后再执行draggable绑定动作。 写个定时器或者回调什么的处理一把就可以搞定了。[/quote] 虽然没成功，但是还是感谢你 谢谢啦~