0

我试图让一个 div 先克隆自己然后拖放，这可行，但我还需要让用户旋转它。

看看这里的代码：http: //jsfiddle.net/zduEZ/

// 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/

我在我的代码中找不到错误。感谢您的帮助。

4

1 回答 1

1

您没有将可拖动对象附加到新创建的元素上，因此我构建了一个函数applyRotation并调用它dragstop（我认为这可能会更好），我添加了另一个检查以避免在旋转“主”元素时克隆圆形选择器：

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/

于 2013-07-01T16:34:52.827 回答