SitePoint Sponsor

User Tag List

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

    grad drop scrollable div to canvas

    hi guys ,

    i'm trying to drag and drop div into canvas , but when i add to div css 'overflow:scroll' it drop stop working

    css:
    HTML Code:
    div.table {border: 0px solid gold;   height:300px; overflow:scroll; }
    div.tr {border: 0px solid gold; display: table-row; }
    div.td {border: 1px solid gold; display: table-cell; }
    HTML Code:
    <div class="table">
      <div class="tr" id="tr1">
        <div class="td"><div id="item_1"><img src="images.gif" height="28" /></div></div>    
      </div>
      <div class="tr" id="tr2">
        <div class="td"><div id="item_2"><img src="images.gif" height="28" /></div></div>    
      </div>
      <div class="tr" id="tr3">
        <div class="td"><div id="item_3"><img src="images.gif" height="28" /></div></div>    
      </div>
     <div class="tr" id="tr4">
        <div class="td"><div id="item_4"><img src="images.gif" height="28" /></div></div>    
      </div>
     <div class="tr" id="tr5">
        <div class="td"><div id="item_5"><img src="images.gif" height="28" /></div></div>    
      </div>
      </div>
     
     
     <canvas id="canvas" width=300 height=300>	</canvas>
    js :
    Code:
    $('div[id^="item_"]').draggable({
    	containment: '#canvas',
    	//appendTo:  'body',
    	helper: 'clone',
    	revert: 'invalid'
    });	
    
    canvas.droppable({
    	//accept: 'div[id^="item_"]',
    	 greedy: true,   
    	drop: function(event, ui) {
            }
    });
    so how i can drag items and drop into canvas please

    regards

  2. #2
    SitePoint Member
    Join Date
    May 2013
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    guys anybody can help me ? i really need it so much

    when i remove " overflow:scroll;" and remove
    containment: '#canvas',
    //appendTo: 'body',
    helper: 'clone',
    revert: 'invalid'

    then its working and i can drop items in to canvas , but i need scroll , hope u got my point

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    It seems that you need to make a copy of the item that you want to drag, so that it is that cloned one that is dragged around instead.

    A working example of this can be found at http://jsfiddle.net/CMYzw/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Member
    Join Date
    May 2013
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you man , but it will work same if i have canvas instead of div 'container' , because i want item to be drag and drop in canvas
    thanks again

  5. #5
    SitePoint Member
    Join Date
    May 2013
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i just tried it with canvas , it does not work

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mnask View Post
    i just tried it with canvas , it does not work
    The following line is preventing it working with the canvas, in that example. Try removing this:

    Code javascript:
    ui.helper.appendTo(this);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    May 2013
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    u great man , really appreciated , can i know how if i want to drag items back to div ?

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mnask View Post
    u great man , really appreciated , can i know how if i want to drag items back to div ?
    About the only useful way to do that is to turn the div contents in to a list, so that you can then use the connectToSortable option.

    You can see an example of that technique being used at http://jsfiddle.net/E7DPk/6/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    May 2013
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    REALLY THANKS YOU SO MUCH

  10. #10
    SitePoint Member
    Join Date
    May 2013
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi again Mr. Paul ,

    i have tried to integrate the two examples above together , but i failed,i cant drag the item back from canvas to ul list , would u please help me ?

    here the full source :

    HTML Code:
    <!doctype html>
    
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="jquery-1.9.1.js"></script>
    <script src="jquery-ui-1.10.3.custom.js"></script>
    
    
    
    <style>			
    		.group {border: 0px solid gold;  width:100px; height:200px;  overflow:auto;} 
    
    		canvas {
    			border: 1px solid gold;
    		}
    
    		
    </style>
    	
    
    <script>
    
    	
    		// When The DOM loads, initialize the scripts.
    		jQuery(function( $ ){
    			
    			
    			 $("#group").sortable({
    				revert: true
    			});
    			
    			
    			
    			$('li[id^="item"]').draggable({
    				  connectToSortable: "#theList",
    				 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 {
                            $(this).removeClass("hide");
                        }
                        $('#'+$(this).attr('id')).draggable({revert: 'invalid'});
                    }
            });
    				
    			
    
    
    			var dropped = false;
    			$( "canvas" ).droppable({				
    				drop: function(event, ui) {
    					dropped = true;
    					$.ui.ddmanager.current.cancelHelperRemoval = true;
    					//ui.helper.appendTo(this);
    				}
    			});
    
    
    			
    					
    		});
    		
    		
    		
    		
    		
    		
    		
    		
    </script>
    </head>
    <body>
    
    
    
    	
    
    
    	<ul id="group1" class="group">
        <li id="item1">item1</li>
         <li id="item2">item2</li>
         <li id="item3">item3</li>
         <li id="item4">item4</li>
    	 <li id="item5">item5</li>
    	 <li id="item6">item6</li>
    	 <li id="item7">item7</li>
    	 <li id="item8">item8</li>
    	 <li id="item9">item9</li>
    	 <li id="item10">item10</li>
    	 <li id="item11">item11</li>
    	 <li id="item12">item12</li>
    	 <li id="item13">item13</li>
    	</ul>
    	
    	
        <canvas id="canvas" width=300 height=300>	</canvas>
    </body>
    </html>
    
    thank you so much

  11. #11
    SitePoint Member
    Join Date
    May 2013
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i did the following but still not working

    HTML Code:
    <!doctype html>
    
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="jquery-1.9.1.js"></script>
    <script src="jquery-ui-1.10.3.custom.js"></script>
    
    
    
    <style>			
    		.group {border: 0px solid gold;  width:100px; height:200px;  overflow:auto;} 
    
    		canvas {
    			border: 1px solid gold;
    		}		
    </style>
    
    <script>
    
    	
    		// When The DOM loads, initialize the scripts.
    		jQuery(function( $ ){
    			
    			
    			 $("#group1").sortable({
    				revert: true
    			});			
    			
    			
    			$('li[id^="item"]').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"
    					
    					});
                    }
    			});
    			
    			
    			var dropped = false;
    			$( "#canvas" ).droppable({				
    				drop: function(event, ui) {
    					dropped = true;
    					$.ui.ddmanager.current.cancelHelperRemoval = true;
    					//ui.helper.appendTo(this);
    				}
    			});		
    					
    		});
    		
    </script>
    </head>
    <body>
    	<ul id="group1" class="group">
        <li id="item1">item1</li>
         <li id="item2">item2</li>
         <li id="item3">item3</li>
         <li id="item4">item4</li>
    	 <li id="item5">item5</li>
    	 <li id="item6">item6</li>
    	 <li id="item7">item7</li>
    	 <li id="item8">item8</li>
    	 <li id="item9">item9</li>
    	 <li id="item10">item10</li>
    	 <li id="item11">item11</li>
    	 <li id="item12">item12</li>
    	 <li id="item13">item13</li>
    	</ul>	
        <canvas id="canvas" width=300 height=300>	</canvas>
    </body>
    </html>
    i still cant drag items back from canvas to ul list , please help me

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •