SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    May 2013
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mnask View Post
    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
    I have been trying to find some spare time to investigate this same issue from your other thread at http://www.sitepoint.com/forums/show...-div-to-canvas

    Others are welcome to jump in too.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Team SitePoint santouras's Avatar
    Join Date
    Jul 2006
    Location
    planet earth
    Posts
    276
    Mentioned
    13 Post(s)
    Tagged
    0 Thread(s)
    the issue is the style properties that get applied to the item after it is dragged back into the list. If you remove position:absolute then it works properly.

    Trying to work out how to do this now
    my utility belt tells me its to the bar batman

    read the manual then google it then do a search THEN post....

  4. #4
    Team SitePoint Bentheax's Avatar
    Join Date
    Feb 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Member
    Join Date
    May 2013
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    Team SitePoint Bentheax's Avatar
    Join Date
    Feb 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mnask View Post
    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.

  7. #7
    SitePoint Member
    Join Date
    May 2013
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
     $("#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


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •