gpt4 book ai didi

jquery - 使用 Jquery 和 Javascript 调整大小、克隆、拖放和旋转图像

转载 作者:行者123 更新时间:2023-12-01 01:20:01 27 4
gpt4 key购买 nike

大家好,

我想在用户选择的图像上实现调整大小、克隆、拖放和旋转功能。我可以在单独的函数中完成所有这些操作,但无法合并到单个函数中。由于图像是动态创建的,我需要一个函数。例如,如果我将拖放、克隆与可调整大小结合起来,它就不会按预期工作。

谢谢

已更新

我能够实现功能,但达不到我的预期。 1.如何旋转放置的图片?
2.由于调整了我单独添加的实时查询的大小,我在放置后无法拖动。
3.Hide()仅隐藏图像,但resize句柄对用户仍然可见。如何在Hide()过程中删除ressized()或者是否有remove()?

 $(function() {
$('#frame img').live('mousemove', function(event) {
$('#frame img').resizable();
});
});


$(function() {
$('#frame img').live('dblclick', function(event) {
$(this).hide();
//$(this).unbind("resizable"); not working
//$(this).removeclass(); not working
});
});



$(document).ready(function() {
//Counter
counter = 0;

//Make element draggable
$("img").draggable({
helper: 'clone',
containment: '#frame',

//When first dragged
stop: function(ev, ui) {
var pos = $(ui.helper).offset();
objName = "#clonediv" + counter
$(objName).css({ "left": pos.left, "top": pos.top });

$(objName).removeClass("drag");
//When an existiung object is dragged
$(objName).draggable({
containment: 'parent',
stop: function(ev, ui) {
var pos = $(ui.helper).offset();
//console.log($(this).attr("id"));
//console.log(pos.left)
//console.log(pos.top)


}
});
}
});

//Make element droppable
$("#frame").droppable({

drop: function(ev, ui) {

if (ui.helper.attr('id').search(/drag[0-9]/) != -1) {
var pos = $(ui.helper).offset();

counter++;
var element = $(ui.helper).clone();
var rotateCSS = 'rotate(' + ui.position.left + 'deg)';

$(this).parent().css({
'-moz-transform': rotateCSS,
'-webkit-transform': rotateCSS
});
//var element = element1.resizable();
element.addClass("tempclass");

$(this).append(element);
$(".tempclass").attr("id", "clonediv" + counter);
//$(".tempclass").attr("onclick",function(){ $(this).remove(););

$("#clonediv" + counter).removeClass("tempclass");

//Get the dynamically item id
draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
itemDragged = "dragged" + RegExp.$1
//console.log(itemDragged)
//alert('left' + pos.left + ',top' + pos.top + 'of item' + itemDragged);
$("#clonediv" + counter).addClass(itemDragged);
}
}
});
//Make the element resizable


});

下面是图像旋转的工作代码,但不适用于放置的对象

        var counter = 1;
$(function() {
$('#test').live('mousedown', function(event) {

if ((counter > 0) && (counter < 350)) {
$('#test').rotate(counter + 45);
counter = counter + 45;
}
else if ((counter > -1) && (counter > 350)) {

counter = 1;
}
});

});

任何建议都将帮助我继续前进。

谢谢

最佳答案

关于jquery - 使用 Jquery 和 Javascript 调整大小、克隆、拖放和旋转图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3764690/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com