У меня мало проблем с использованием jQuery UI и html2canvas плагинов.
Пожалуйста, ознакомьтесь с jsfiddle и кодом jQuery ниже. http://jsfiddle.net/fX262/7/
$(function () {
$(".borrd-create-prod li a img").draggable({
revert: "invalid",
helper: "clone",
cursor: "move"
});
$(".borrd-item").droppable();
$("#borrd-droppable").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ".borrd-create-prod li a img",
drop: function (event, ui) {
$(this).append(ui.helper.clone());
$("#borrd-droppable img").addClass("borrd-item");
$(".borrd-item").draggable({
stack: ".borrd-item"
});
$(".borrd-item").droppable({
containment: "#borrd-droppable"
});
/*ui.helper.clone().resizable({
animate: "true"
});*/
$(".borrd-item").each(function (i) {
$(this).attr("id", "prod_img_" + i);
});
$(".borrd-item").droppable({
containment: "#borrd-droppable"
});
$(this).find(".placeholder-txt").remove();
},
});
$(".borrd-drop img").resizable({
handles: "n, e, s, w, sw, ne, nw, sw",
animate: "true"
});
$(".borrd-right").tabs({
hide: {
effect: "fade",
duration: "fast"
}
});
});
$(function() {
$( "#submitBorrdImg" ).click(function() {
html2canvas($("#borrd-droppable"), {
onrendered: function (canvas) {
var canvasImg = canvas.toDataURL("image/jpg");
$("#canvasImg").html('<img src="'+canvasImg+'" alt="">');
/*window.open(canvasImg);*/
}
});
});
});
Мне нужно, чтобы это было совместимо с Firefox 28, Google chrome 32 и, если возможно, IE 8.
Любая помощь была бы весьма признательна.
РЕДАКТИРОВАТЬ :
Теперь можно $(".borrd-item").resizable();
добавив $(".borrd-item").resizable();
внутри drop: function (event, ui) {}
и добавление соответствующего jQuery UI CSS. Но после того, как вы перетащите левую сторону, она больше не тащится. Может ли кто-нибудь пролить свет на эту проблему?
http://jsfiddle.net/fX262/9/
http://jsfiddle.net/fX262/11/
http://jsfiddle.net/fX262/11/embedded/result/
Применение изменения размера в теге img не помогло. Он работает только на блочных элементах. Поэтому я обернул img-тег в блочном элементе и применил интерфейс jQuery на нем.
Также добавление идентификаторов клонов и их проверка сделали трюк следующим образом:
if ($(ui.draggable)[0].id !== "") {
x = ui.helper.clone();
ui.helper.remove();
x.addClass("borrd-item");
x.draggable({
helper: 'original',
containment: '#borrd-droppable',
tolerance: 'fit',
start: function (event, ui) {
$(this).css("z-index", a++);
}
});
}
Является ли это ошибкой в пользовательском интерфейсе jQuery?
В настоящее время другие вопросы:
Почему, когда мы перетаскиваем изображения влево, изображения располагаются намного ниже фактической позиции? Я удалил все paddings и поля на элементах, таких как входы и контейнеры div над div "borrd-droppable". Теперь изображения расположены ниже, чем раньше. Поэтому я думаю, что это какая-то проблема с CSS.
При перекрытии изображений, если мы нажимаем несколько раз на одном изображении, его z-индекс увеличивается до гораздо большего, чем другие изображения. Теперь, если это изображение должно идти назад, мы должны щелкнуть еще несколько раз. Вместо этого можно сделать переход назад к следующему изображению всего за один клик?
canvas2html также работает, но только в Firefox. Это не Google Chrome. Я даже попробовал функцию $ (window).load. Не работает. Знаю, почему?
Кстати, хотя я размещаю код и описание, этот вопрос не получил ни одного ответа. Это демотивация для новичка, подобного мне, в Stack Overflow.