see below link :
http://liveweave.com/d8F0Qw[
^]
i have two droppable portion with different id i want to drop imgaes in different section . problem i that it works fine for first droppable but not for second one.
how can i detect droppable area and place image there ?...
Html Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
<script src="http://fabricjs.com/lib/fabric.js"></script>
<div id="wrapper">
<table>
<tr valign="top">
<td>
<ul id="image-list"><li><img src="http://www.gettyimages.com/CMS/Pages/ImageCollection/StaticContent/image1_%20164248809.jpg" class="draggable-image"></li>
</ul>
</td><td>
<div id="content">
<table>
<tr><td>
<canvas id="canvas" width="320" height="256">
</canvas>
<div id="canvas-drop-area"></div>
</td></tr>
<tr><td>
<canvas id="canvas1" width="320" height="256">
</canvas>
<div id="canvas-drop-area1"></div>
</td></tr>
</table>
<!--
</div>
</td><td>
<ul id="image-list"><li><img src="http://upload.wikimedia.org/wikipedia/commons/c/c3/Aurora_as_seen_by_IMAGE.PNG" class="draggable-image"></li>
</ul>
</td></tr>
</table>
</div>
javascript code:
(function () {
var canvas = new fabric.Canvas('canvas');
var canvas_el = document.getElementById('canvas');
var canvas1 = new fabric.Canvas('canvas1');
$(document).ready(function () {
var $drop = $('#canvas-drop-area'),
$drop1 = $('#canvas-drop-area1'),
$gallery = $('td > #image-list li'),
$draggedImage=null;
$gallery.draggable({
helper: 'clone',
start: function (e) {
$draggedImage=event.target;
$drop.css({
'display': 'block'
})
},
stop: function () {
$(this).find('img').css({
});
$drop.css({
'display': 'none'
});
$draggedImage=null;
},
revert: true
});
$drop.droppable({
over: function (event, ui) {
$(this).addClass('active');
},
drop: function (event, ui) {
var image =$draggedImage&& $draggedImage.src;
console.log($draggedImage.alt);
img_to_canvas(image,$draggedImage.alt,1);
},
out: function (event, ui) {
$(this).removeClass('active');
},
deactivate: function (event, ui) {
$(this).removeClass('active');
}
});
$drop1.droppable({
over: function (event, ui) {
$(this).addClass('active');
},
drop: function (event, ui) {
var image =$draggedImage&& $draggedImage.src;
console.log($draggedImage.alt);
img_to_canvas(image,$draggedImage.alt,2);
},
out: function (event, ui) {
$(this).removeClass('active');
},
deactivate: function (event, ui) {
$(this).removeClass('active');
}
});
});
var img_to_canvas = function(image,sendfront,checkcanvas) {
var img = new Image();
img.src = image;
fabric.Image.fromURL(img.src, function (source) {
img = source.set({
left: 0,
top: 0,
angle: 0,
id:sendfront
});
if(checkcanvas=='1'){
canvas.add(img);
if(sendfront=='start'){
canvas.sendToBack(img);
}
canvas.renderAll();
}else{
canvas1.add(img);
if(sendfront=='start'){
canvas1.sendToBack(img);
}
canvas1.renderAll();
}
});
}
})();
[Edit member="Tadit"]
Corrected formatting and/or grammatical issues.
Added
pre
tags.
[/Edit]