Question

我试图让用户旋转图像，但不管它看起来什么都不行。我有完美的图像拖放/调整大小，旋转只是不想正常工作。

请看一下，让我知道如何解决这个问题。感谢。

CODE：

$(function(){  
 //Make every clone image unique.  
   var counts = [0];
    var resizeOpts = { 
      handles: "all" ,autoHide:true
    };    
   $(".dragImg").draggable({
                         helper: "clone",
                         //Create counter
                         start: function() { counts[0]++; }
                        });

$("#dropHere").droppable({
       drop: function(e, ui){
               if(ui.draggable.hasClass("dragImg")) {
     $(this).append($(ui.helper).clone());
   //Pointing to the dragImg class in dropHere and add new class.
         $("#dropHere .dragImg").addClass("item-"+counts[0]);
             $("#dropHere .img").addClass("imgSize-"+counts[0]);

  $("#dropHere .img").addClass("mainTarget-"+counts[0]);
   $("#dropHere #rotate").attr("id", "target-"+counts[0]);
    $("#dropHere .imgSize").attr("id", "mainTarget-"+counts[0]);


   //Remove the current class (ui-draggable and dragImg)
         $("#dropHere .item-"+counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging");

$(".item-"+counts[0]).dblclick(function() {
$(this).remove();
});     
    make_draggable($(".item-"+counts[0])); 
      $(".imgSize-"+counts[0]).resizable(resizeOpts);  
       }

       }


      });


var zIndex = 0;
function make_draggable(elements)
{   
    elements.draggable({
        containment:'parent',
        start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
        stop:function(e,ui){
        }
    });
}    



   });


//Allow image to be rotated.
var dragging = false;

$(function() {    
    var target = $('[id^=target-]');
    var mainTarget = $('[id^=mainTarget-]');
    var offset = mainTarget.offset();
    target.mousedown(function() {
        dragging = true
    })
    $(document).mouseup(function() {
        dragging = false
    })
    $(document).mousemove(function(e) {
        if (dragging) {

            var center_x = (offset.left) + (mainTarget.width()/2);
            var center_y = (offset.top) + (mainTarget.height()/2);
            var mouse_x = e.pageX; var mouse_y = e.pageY;
            var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
            var degree = (radians * (180 / Math.PI) * -1) + 120;    
            mainTarget.css('-moz-transform', 'rotate(' + degree + 'deg)');
            mainTarget.css('-moz-transform-origin', '50% 50%');
            mainTarget.css('-webkit-transform', 'rotate(' + degree + 'deg)');
            mainTarget.css('-webkit-transform-origin', '50% 50%');
            mainTarget.css('-o-transform', 'rotate(' + degree + 'deg)');
            mainTarget.css('-o-transform-origin', '50% 50%');
            mainTarget.css('-ms-transform', 'rotate(' + degree + 'deg)');
            mainTarget.css('-ms-transform-origin', '50% 50%');
        }
    })
});

HTML：

 <div class="dragImg"><img class="img" src="http://www.thumbshots.com/Portals/0/Images/Feature%20TS%201.jpg">
     <span id="rotate">Rotate</span></img>
 </div>

CSS：

#dropHere {
    width:400px;
    height: 400px;
    border: dotted 1px black;

}

Answer 1

Working Fiddle

将可丢弃的处理程序更改为

$("#dropHere").droppable({
    drop: function (e, ui) {
        if (ui.draggable.hasClass("dragImg")) {
            var the_div  = $(ui.helper).clone()
            $(this).append(the_div);

            //Pointing to the dragImg class in dropHere and add new class.
            the_div.addClass("item-" + counts[0]);
            the_div.find('img').addClass("imgSize-" + counts[0]);

            the_div.find('img').addClass("mainTarget-" + counts[0]);
            the_div.find('span').attr("id", "target-" + counts[0]);
            the_div.find('img').attr("id", "mainTarget-" + counts[0]);

            //Remove the current class (ui-draggable and dragImg)
            the_div.find('img').removeClass("dragImg ui-draggable ui-draggable-dragging");

            $(".item-" + counts[0]).dblclick(function () {
                $(this).remove();
            });
            make_draggable($(".item-" + counts[0]));
            $(".imgSize-" + counts[0]).resizable(resizeOpts);
        }

        $("#target-" + counts[0]).mousedown(function (e) {
            var item_target = $('.item-' + $(this).attr('id').replace('target-', ''));
            item_target.draggable('disable');
            item_target.removeClass("dragImg ui-draggable ui-draggable-dragging ui-state-disabled");
        });


    }


});

到您的放置处理程序，以便在旋转时禁用拖动。同时将$(document).ready()中的代码更改为以下

//Allow image to be rotated.
var dragging = false;
console.log($('[id^=target-]'))
var target = $('[id^=target-]');
var mainTarget = $('[id^=mainTarget-]');
var rotation_target;

$(document).mousemove(function (e) {
    if (dragging) {

        var mainTarget = $('.mainTarget-' + rotation_target.attr('id').replace('target-', '')).parent();

        var offset = mainTarget.offset();
        var center_x = (offset.left) + (mainTarget.width() / 2);
        var center_y = (offset.top) + (mainTarget.height() / 2);
        var mouse_x = e.pageX;
        var mouse_y = e.pageY;
        var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        var degree = (radians * (180 / Math.PI) * -1) + 120;
        mainTarget.css('-moz-transform', 'rotate(' + degree + 'deg)');
        mainTarget.css('-moz-transform-origin', '50% 50%');
        mainTarget.css('-webkit-transform', 'rotate(' + degree + 'deg)');
        mainTarget.css('-webkit-transform-origin', '50% 50%');
        mainTarget.css('-o-transform', 'rotate(' + degree + 'deg)');
        mainTarget.css('-o-transform-origin', '50% 50%');
        mainTarget.css('-ms-transform', 'rotate(' + degree + 'deg)');
        mainTarget.css('-ms-transform-origin', '50% 50%');
    }
});
$(document).mouseup(function () {
    dragging = false
    $("[class^=item]").draggable('enable');
})
$(document).on('mousedown', '[id^=target-]', function () {
    dragging = true
    rotation_target = $(this);
})

此代码将识别您在mousedown时的旋转目标，以便知道要旋转的图像。它还可以在鼠标重新启动后再次拖动，这样您就可以在完成旋转后移动图像

还添加以下css

img, span{
    -webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
}

在尝试旋转时停止突出显示文本

Answer 2

你的

target.mousedown(function() {
    dragging = true
})

被调用太快，它在删除区域中创建元素之前执行。您需要使用.on

$(document).on("mousedown","[id^=target-]",function() {
    dragging = true;
});

同样mainTarget也不会保留任何内容，因为尚未创建元素，请将鼠标移动到：

$(document).mousemove(function(e) {
    if (dragging) {
        var mainTarget = $("[id^=mainTarget-]");
        var offset = mainTarget.offset();
        var center_x = (offset.left) + (mainTarget.width()/2);

您的mainTarget ID也未设置

$("#dropHere .imgSize").attr("id", "mainTarget-"+counts[0]);

需要

$("#dropHere img[class*=imgSize]").attr("id", "mainTarget-"+counts[0]);

.imgSize不起作用，因为实际的类是imgSize-（somenumber），因此使用*=imgSize将选择一个包含其中包含单词imgSize的类的元素

此外，图像的旋转不会旋转太多，因为从target范围偏移的鼠标没有太大的变化机会，就像它随着鼠标移动一样移动。一个例外是当你靠近窗户边缘时。您可能希望使用其他一些代码来确定旋转的程度，或者在旋转时删除拖动

JSFiddle Demo

旋转图像Jquery帮助，请拨打我的jsfiddle

2 个答案: