grad drop scrollable div to canvas

**mnask** · May 8, 2013 03:16

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

**mnask** · May 8, 2013 12:02

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

**paul_wilkins** · May 8, 2013 15:47

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/

**mnask** · May 8, 2013 15:52

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

**mnask** · May 8, 2013 15:54

i just tried it with canvas , it does not work

**paul_wilkins** · May 8, 2013 16:19

Originally Posted by mnask

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);

**mnask** · May 8, 2013 16:22

u great man , really appreciated , can i know how if i want to drag items back to div ?

**paul_wilkins** · May 8, 2013 16:32

Originally Posted by mnask

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/

**mnask** · May 8, 2013 16:34

REALLY THANKS YOU SO MUCH

**mnask** · May 10, 2013 09:41

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

**mnask** · May 11, 2013 10:03

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

User Tag List

Thread: grad drop scrollable div to canvas

Thread Tools

Display

grad drop scrollable div to canvas

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions