Question

我正在开发一个用于拖放对象的Web应用程序。在那里，我想创建句柄来调整大小并在删除后旋转克隆对象。我成功添加了句柄以调整大小。它运作良好。但我不知道如何添加旋转手柄。怎么做？

请参阅以下显示我当前输出的链接。

http://tinypic.com/view.php?pic=2iacrad&s=8#.U_8VA5SSy80

我当前的脚本是

<script>
    //<![CDATA[
    window.onload=function(){
        var x = null;
        var angle =5;
        var value = 0;
        $("#dialog").hide();
        //Make element draggable
        $(".drag").draggable({
            helper: 'clone',
            cursor: 'move',
            tolerance: 'fit',
            revert: true
        });

        $("#droppable").droppable({
            accept: '.drag',
            activeClass: "drop-area",
            drop: function (e, ui) {
                if ($(ui.draggable)[0].id != "") {
                    x = ui.helper.clone();
                    ui.helper.remove();
                    x.draggable({
                        helper: 'original',
                        cursor: 'move',
                        //containment: '#droppable',
                        tolerance: 'fit',
                        drop: function (event, ui) {
                            $(ui.draggable).remove();
                        }
                    });

                    x.resizable({
                        maxHeight: $('#droppable').height(),
                        maxWidth: $('#droppable').width(),
            aspectRatio: true,
            handles: 'ne, se, sw, nw'
                    });
                }
            }
        });
    }//]]>
</script>

用这个如何添加旋转功能？

提前致谢

Answer 1

First you have to add a class rorate to your drop object and then make a  rotation function and apply that on dropable object:

$(document).ready(function($) {
var x = null;
counter = 0;
//Make element draggable
$(".drag").draggable({
    helper: 'clone',
    cursor: 'move',
    tolerance: 'fit',
    revert: true
});

$("#droppable").droppable({
    accept: '.drag',
    activeClass: "drop-area",
    drop: function (e, ui) {
        if ($(ui.draggable)[0].id != "") {
            counter++;
            var dragObject = $(ui.draggable)[0].id;
            x = ui.helper.clone();
            ui.helper.remove();
            x.draggable({
                helper: 'original',
                cursor: 'move',
                //containment: '#droppable',
                tolerance: 'fit',
                drop: function (event, ui) {
                    $(ui.draggable).remove();
                }
            });
            var ro = $('<div class="rotator"></div>').addClass('handler').css({
                    'position': 'absolute',
                    'bottom': 5,
                    'right': 5,
                    'height': 10,
                    'width': 10,
                    'background-color': 'green'
                    });

            $(ro).insertAfter($(x.find('img')));
            x.appendTo('#droppable');
            applyRotation();

        }
    }
});



});
function applyRotation()
 {
      $('.handler').draggable({
        opacity: 0.01,
        helper: 'clone',
        drag: function (event, ui) {

            var rotateCSS = 'rotate(' + ui.position.left + 'deg)';
                $(this).parent().css({
                '-moz-transform': rotateCSS,
                    '-webkit-transform': rotateCSS
            });
        }
    });
}

    Here You can see : http://fiddle.jshell.net/gpCNT/75

在jquery中旋转克隆对象的句柄

1 个答案: