mnask
1
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:
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; }
<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 :
$('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
2
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
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
4
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
5
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:
ui.helper.appendTo(this);
mnask
7
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
9
REALLY THANKS YOU SO MUCH
mnask
10
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 :
<!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
11
i did the following but still not working
<!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