Drag item back from canvas to ul list

i’m using jquery(new in jquery) to drag li item into canvas , and its work fine , but when i try to drag the item back to list , it does not work , can you help me please ? here is the source http://jsfiddle.net/BAZyF

thanks

I have been trying to find some spare time to investigate this same issue from your other thread at http://www.sitepoint.com/forums/showthread.php?1057196-grad-drop-scrollable-div-to-canvas

Others are welcome to jump in too.

Here’s a very rough proof of concept: http://jsfiddle.net/BAZyF/5/

It’s still not perfect but could become workable with a bit more effort.

I don’t think jQuery UI is really built to handle this sort of interaction out of the box. Then again, perhaps someone with a bit more experience with jQuery UI will come along and show us how elegantly this can be solved.

With respect to my changes: When the clone gets dragged back into the list, it loses its identity but retains a style attribute and content (wut?). So, I was able to kludge it somewhat by making the list itself a droppable item and setting up a second draggable event handler on the clone that makes it forcibly reassemble itself into an identifiable element and remove the positioning attribute.

Also, as mentioned on stack overflow: The canvas itself doesn’t actually serve any purpose during this whole exercise, it just serves as a bounds for the drop event and stays empty the whole time.

hi dears , thank to u all , i fixed this issue , its not perfect but its working fine , i will post the code later , but simply , i clone the item and when i drop it into the list , i remove the item in the canvas then i append it to list , then i make sorting to the list , its work aroung , but working fine …thank u all , i love this forum and the people in this forum , really so nice people

regards

Nice going! Don’t forget to post that code, I’d love to see how you sorted it out.



 $("#group1").droppable({
				drop: function( event, ui ) {
					item = ui.draggable ;
					
					 ui.draggable.remove() ;
					
					$("#group1").append('<li id="'+item.attr('id')+'" >'+item.attr('id')+'</i>');
					$('li[id^="item"]').not(".ui-draggable").draggable({
						// connectToSortable: "#group1",
						 helper: function(){
							$copy = $(this).clone();
							return $copy;
						 },
						 start: function(event, ui) {
							dropped = false;
							$(this).addClass("hide");
						},
						stop: function(event, ui) {
							if (dropped==true) {
								$(this).remove();
							} else {
								dropped=false
								$(this).removeClass("hide");
							}
							$('#'+$(this).attr('id')).draggable({
								//connectToSortable: "#group1",
								//helper: "clone",
								revert: "invalid"
							
							});
						}
					
					});
					
				$("#group1 li").sort(asc_sort).appendTo('#group1');				
					
				}
			});			
			
			function asc_sort(a, b){
				
				if(parseInt(($(b).text())) < (parseInt(($(a).text())))){
					return $(b).text();
				}
			}


			$('li[id^="item"]').draggable({
				//revert: "invalid",
				// connectToSortable: "#group1",
				 helper: function(){
					$copy = $(this).clone();
					return $copy;
				 },
				 start: function(event, ui) {
                    dropped = false;
                    $(this).addClass("hide");
                },
                stop: function(event, ui) {
                    if (dropped==true) {
                        $(this).remove();
                    } else {
						dropped=false
                        $(this).removeClass("hide");
                    }
                    $('#'+$(this).attr('id')).draggable({
						//connectToSortable: "#group1",
						//helper: "clone",
						revert: "invalid"
					
					});
                }
			});
			
			
			var dropped = false;
			$( "#canvas" ).droppable({				
				drop: function(event, ui) {
					dropped = true;
					$.ui.ddmanager.current.cancelHelperRemoval = true;
					//ui.helper.appendTo(this);
				}
			});	


if u can improve the code , i will be happy …thanks again