jQuery 끌어서 놓기, 복제 및 회전

Question

먼저 복제본을 작성한 다음 끌어서 놓기 위해 div를 가져 오려고합니다. 작동하지만 사용자가 회전하게해야합니다. 여기에 코드에서

보기 : http://jsfiddle.net/avPf6/1/

내 코드에서 오류를 찾을 수 없습니다 : 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 
      }); 
     } 
    }); 

내가는이 예제와 같이 회전합니다. 도움 주셔서 감사합니다.

Answer 1

applyRotation 함수를 작성하고 dragstop (이게 더 좋을 것 같네요)에서 호출하도록 draggable을 새 생성 된 요소에 연결하지 않습니다.

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/