【发布时间】：2014-12-11 11:10:07
【问题描述】：
见下方链接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");
}
})();
【问题讨论】：
-
请在此处发布您的代码，并提供良好的解释......而不是仅仅将人们重定向到其他地方。
-
为什么是-ve ??我可以知道原因
-
这就像 jsfiddel ，它的书面 i 论坛使用 jsfiddel 或更好地理解
-
首先你正在使用的重复 id "image-list" 是一个深不可测的借口......
-
是的，我用过 td> #image-list i jquery 让它工作
标签： javascript jquery html css fabricjs