两个可滴管的区域第一个只能工作
Two droppable area first one works only
请参阅以下链接:http://liveweave.com/d8F0Qw
我有两个不同id的可丢弃部分,我想把图像放在不同的部分。问题是,它对第一个滴管有效,但对第二个滴管无效。
如何检测可丢弃区域并将图像放置在那里?
Html代码:
<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代码:
(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();
}
});
}
})();
以下是解决方案http://liveweave.com/0RgVc6
观察var $drop = $('#canvas-drop-area,#canvas-drop-area1')
和我删除了$drop1
,你可以从下面的代码中理解
(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,#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,$(event.target).is("#canvas-drop-area")?1: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();
}
});
};
})();
相关文章:
- 而循环只设置php中输入字段中的第一个值
- 错误:$injector:modulerr模块错误(我的第一个SPA应用程序)
- IE11中的第二个调用取消了第一个Fetch API调用
- Javascript XMLHttpRequest——只有第一个POST请求有效
- 使用javascript或angularjs特定过滤器搜索字符串中第一个img标记的json值
- 将OnClick函数设置为<ul>,最后一个ul是擦除第一个ul-s
- 如何在Jquery函数中为自动完成文本区域指定一个变量作为Id
- RxJS油门行为;立即获取第一个值
- Angular UI网格:如何通过第一个UI网格中的按钮使第二个UI网格可见
- 选择多个实例中的第一个
- 如何在调用下一个请求之前完成第一个Ajax Get请求
- Lodash:返回对象的第一个键,该对象的值(即数组)中有一个给定的元素(即字符串)
- 我想从使用onkeypress事件的文本区域获取一个属性
- 看起来第一个console.log是'It’不太对
- 与杜兰达尔合作的第一个JavaScript项目.尝试从第三方 API 获取数据
- 节点发布错误对象的第一个“属性”
- Javascript:表单验证getElementById仅返回第一个id元素
- 仅将 CSS 规则应用于
中的第一个 ,而不分配类/ID - JS在隐藏未定义的值后仅从数组中返回第一个id的值
- 高图表,检测点是否在堆栈中的第一个