两个可拖动的单页不起作用
two draggable on single page not working
请参阅下面的链接http://liveweave.com/qddUaX
单页上有两个可拖动的问题，最后一个有效，我想把图像从两侧的两个区域拖到一个通用的画布上，
我正试图将图像从两个可拖动区域拖动到一个可丢弃区域。它适用于一个可拖放区域，当两个可拖动区域时，我有问题从其中一个区域拖动图像。。你可以看到左右两个图像部分。
当图像从左侧删除时，我会收到未定义的消息，但当图像从右侧删除时，它可以正常工作。
我不明白为什么它不起作用。
html代码
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<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>
<!--script src="js/Delicious_500.font.js"></script-->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="wrapper">
<table>
<tr>
<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><td>
<div id="content">
<canvas id="canvas" width="640" height="512">
Canvas not supported in your browser!
</canvas>
<div id="canvas-drop-area"></div>
<textarea id="text-input"></textarea>
<button id="create-text-obj">Go</button>
<button id="save-as-image">Save as Image</button>
</div>
</td><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></tr>
<tr><td><b>Delete</b></td><td></td><td></td></tr>
</table>
</div>
<script src="js/main.js"></script>
</body>
</html>
main.js 代码
(function () {
var canvas = new fabric.Canvas('canvas');
var canvas_el = document.getElementById('canvas');
$(document).ready(function () {
$('#create-text-obj').on('click', function () {
var text = $('#text-input').val();
create_text_obj(text);
});
$('#save-as-image').on('click', function () {
save_canvas();
});
/* Bring active object to the front of the canvas */
canvas.on('mouse:down', function (e) {
if (!(typeof (e.target) === 'undefined')) {
canvas.bringToFront(e.target);
}
});
/* Define drag and drop zones */
var $drop = $('#canvas-drop-area'),
$gallery = $('td > #image-list li');
/* Define the draggable properties */
$gallery.draggable({
start: function () {
$drop.css({
'display': 'block'
})
},
stop: function () {
$(this).find('img').css({
'opacity': 0.4
});
$drop.css({
'display': 'none'
});
},
revert: true
});
/* Define the events for droppable properties */
$drop.droppable({
over: function (event, ui) {
$(this).addClass('active');
},
drop: function (event, ui) {
var image = event.originalEvent.target.src,
loc = windowToCanvas(canvas_el, event.clientX, event.clientY);
alert(image);
img_to_canvas(image, loc.x, loc.y);
},
out: function (event, ui) {
$(this).removeClass('active');
},
deactivate: function (event, ui) {
$(this).removeClass('active');
}
});
});
var create_text_obj = function(text) {
var text_obj = new fabric.Text(text, {
fontFamily: 'Delicious_500',
left: 600,
top: 225,
fontSize: 80,
textAlign: "left",
fill: "#FF0000" // Set text color to red
});
canvas.add(text_obj);
}
var img_to_canvas = function(image, x, y) {
var img = new Image();
img.src = image;
fabric.Image.fromURL(img.src, function (source) {
img = source.set({
left: 320,
top: 256,
angle: 0
});
canvas.add(img);
canvas.renderAll();
});
}
var windowToCanvas = function(canvas, x, y) {
var bbox = canvas.getBoundingClientRect();
return {
x: x - bbox.left * (canvas.width / bbox.width),
y: y - bbox.top * (canvas.height / bbox.height)
};
}
var save_canvas = function() {
window.location = canvas.toDataURL("image/png");
}
})();
查看实时更新http://liveweave.com/pCo8e2
我们应该在它开始拖动$draggedImage 时捕获图像
(function () {
var canvas = new fabric.Canvas('canvas');
var canvas_el = document.getElementById('canvas');
$(document).ready(function () {
$('#create-text-obj').on('click', function () {
var text = $('#text-input').val();
create_text_obj(text);
});
$('#save-as-image').on('click', function () {
save_canvas();
});
/* Bring active object to the front of the canvas */
canvas.on('mouse:down', function (e) {
if (!(typeof (e.target) === 'undefined')) {
canvas.bringToFront(e.target);
}
});
/* Define drag and drop zones */
var $drop = $('#canvas-drop-area'),
$gallery = $('td > #image-list li'),
$draggedImage=null;
/* Define the draggable properties */
$gallery.draggable({
start: function (e) {
$draggedImage=event.target;
$drop.css({
'display': 'block'
});
},
stop: function () {
$(this).find('img').css({
'opacity': 0.4
});
$drop.css({
'display': 'none'
});
},
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,
loc = windowToCanvas(canvas_el, event.clientX, event.clientY);
img_to_canvas(image, loc.x, loc.y);
},
out: function (event, ui) {
$(this).removeClass('active');
},
deactivate: function (event, ui) {
$(this).removeClass('active');
}
});
});
var create_text_obj = function(text) {
var text_obj = new fabric.Text(text, {
fontFamily: 'Delicious_500',
left: 600,
top: 225,
fontSize: 80,
textAlign: "left",
fill: "#FF0000" // Set text color to red
});
canvas.add(text_obj);
};
var img_to_canvas = function(image, x, y) {
var img = new Image();
img.src = image;
fabric.Image.fromURL(img.src, function (source) {
img = source.set({
left: 320,
top: 256,
angle: 0
});
canvas.add(img);
canvas.renderAll();
});
};
var windowToCanvas = function(canvas, x, y) {
var bbox = canvas.getBoundingClientRect();
return {
x: x - bbox.left * (canvas.width / bbox.width),
y: y - bbox.top * (canvas.height / bbox.height)
};
};
var save_canvas = function() {
window.location = canvas.toDataURL("image/png");
};
})();
相关文章：
- 如何使元素在可拖动元素内可单击
- 如何正确拖动jqgrid编辑表单
- FullCalendar单击并拖动多个事件
- 防止在单击拖动时关闭引导下拉列表
- 当我单击画布并拖动鼠标时，光标将变为文本选择光标.我该如何防止这种情况发生
- 在jquery中单击并拖动
- d3-单击时触发的拖动行为
- D3 区分具有拖动行为的元素的单击和拖动
- 如何使用鼠标单击和拖动来放大 D3
- 如何防止在拖动时单击元素
- 防止正在拖动的父项的子项上的单击事件
- 如何在鼠标单击时设置可拖动事件
- jQuery UI - 如何区分拖动/调整大小启动事件和单击事件
- 连接到 Web 音频 API 增益节点的滑块在我拖动时弹出并单击.当我拖动时，音量没有平滑的斜坡
- 如何使用拉斐尔库在 Javascript 中执行动画，使用鼠标单击或鼠标拖动
- 用鼠标单击并拖动绘制一个矩形 - JavaScript
- 猫头鹰轮播 2 - 单击幻灯片时处于活动状态拖动
- 防止单击+拖动多个选择列表中的选择
- 两个可拖动的单页不起作用
- jQuery UI可拖动:单击时堆叠
