jQuery的拖放，克隆和旋轉

Question

我試圖讓一個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/

我無法找到我的代碼錯誤。 謝謝你的幫助。

Answer 1

所以我建立了一個功能​​並調用它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/