Question

我试图让div首先克隆自己然后拖放，这是有效的，但我需要让用户旋转它。

// Your original element
var ele = $('.draggable');

$('.draggable').draggable({ helper: "clone" });
$('.draggable').bind('dragstop', function (event, ui) {
    $(this).after($(ui.helper).clone().draggable()); });

    // Create handle dynamically
    $('<div></div>').appendTo(ele).attr('id', 'handle').css({
        'position': 'absolute',
        'bottom': 5,
        'right': 5,
        'height': 10,
        'width': 10,
        'background-color': 'green'
    });

    ele.css('position', 'relative');

    $('#handle').draggable({
        handle: '#handle',
        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
            });
        }
    });

我希望它像这个例子一样旋转：http://jsfiddle.net/avPf6/1/

我无法在代码中找到错误。谢谢你的帮助。

Answer 1

你没有将draggable附加到新创建的元素上，所以我建立了一个函数applyRotation并在dragstop上调用它（我认为这可能更好），我添加另一个检查以避免旋转＆＃34; master＆＃34;克隆圆形选择器元素：

if ($(ui.helper).hasClass('rotator'))
        return true

最后，我不使用任何ID，只使用类，以避免ID克隆的冲突。

最终代码如下：

// Your original element
var ele = $('.draggable');

$('.draggable').draggable({
    helper: "clone"
});
$('.draggable').bind('dragstop', function (event, ui) {
    if ($(ui.helper).hasClass('rotator'))
        return true
    $(this).after($(ui.helper).clone().draggable());
    applyRotation();
});

// Create handle dynamically
$('<div class="rotator"></div>').appendTo(ele).addClass('handler').css({
    'position': 'absolute',
        'bottom': 5,
        'right': 5,
        'height': 10,
        'width': 10,
        'background-color': 'green'
});

ele.css('position', 'relative');

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
            });
        }
    });
}

这是一个工作小提琴：http://jsfiddle.net/zduEZ/11/

jQuery拖放，克隆和旋转

1 个答案: