两个可放置的区域第一个只能工作 [英] two droppable area first one works only
本文介绍了两个可放置的区域第一个只能工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
请参阅以下链接: http://liveweave.com/d8F0Qw [ ^ ]
i有两个可丢弃的部分,具有不同的id我想要将imgaes放入不同的部分 。我觉得它适用于第一次投放但不适用于第二次。
如何检测可投放区域并将图像放在那里?...
Html代码:
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 id="canvas-drop-area"></div-->
</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代码:
javascript code:
(function () {
var canvas = new fabric.Canvas('canvas');
var canvas_el = document.getElementById('canvas');
var canvas1 = new fabric.Canvas('canvas1');
$(document).ready(function () {
/* Define drag and drop zones */
var $drop = $('#canvas-drop-area'),
$drop1 = $('#canvas-drop-area1'),
$gallery = $('td > #image-list li'),
$draggedImage=null;
/* Define the draggable properties */
$gallery.draggable({
helper: 'clone',
start: function (e) {
$draggedImage=event.target;
$drop.css({
'display': 'block'
})
},
stop: function () {
$(this).find('img').css({
/* 'opacity': 0.4 */
});
$drop.css({
'display': 'none'
});
$draggedImage=null;
},
revert: true
});
/* Define the events for droppable properties */
$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();
}
});
}
})();
更正了格式和/或语法问题。
添加预
标签。
[/编辑]
推荐答案
( document )。ready( function (){
/ * 定义拖放区* /
var
(document).ready(function () { /* Define drag and drop zones */ var
drop =
(' #canvas-drop-area'),
这篇关于两个可放置的区域第一个只能工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文