애니메이션 된 속성 복제

Question

최근에 젊은 사용자가 쉽게 드래그 앤 드롭 게임을 변경했습니다.

기본적으로 단어를 드래그 앤 드롭하여 단어를 철자하는 대신 문자를 클릭하면 올바른 영역으로 자동으로 움직입니다.

내 문제는 드래그 앤 드롭 기능을 사용하여 글자가 복제되어 게임에서 각 항목을 두 번 이상 사용할 수있는 경우입니다. 지금 그들은 그렇지 않습니다.

끌어서 놓기 이벤트 이외의 다른 방법이 있습니까?

$ (e.target) .clone : 수동으로 다음을 사용하여 요소를 복제 할 수

$('.drag').draggable({ 
    helper: 'clone' 
}); 

Answer 1

당신은 클론 요소를 clone() 및 animate() 수 있습니다

if (target.length) { 
    $(".minibutton").prop("disabled", true); 
    b.clone().addClass(
     b.data("letter") == target.data("letter") ? "wordglow3" : "wordglow" 
    ).appendTo("table").css({ 
     background: "transparent", 
     position: "absolute", 
     top: currentPos.top, 
     left: currentPos.left 
    }).animate({ 
     top: targetPos.top, 
     left: targetPos.left 
    }, "slow", function() { 
     $(this).css({ 
      top: 0, 
      left: 0 
     }).appendTo(target); 
     target.addClass("occupied"); 
    }); 
} 

(보조 노트로서, 당신은 이미 부모가있는 경우 요소가 이동하므로, appendTo() 전에 remove()를 호출 할 필요가 없습니다.)

Answer 2

이 내가 드래그 사용과 기능을 삭제할 것입니다

$('.drag').on('click', function(e) { 
e.preventDefault(); 

var target  = $('.drop-box.spellword:not(.occupied):first'); 
var targetPos = target.position(); 
var currentPos = $(this).offset(); 
var b = $(this); 

if(target.length) { 


    if(b.attr("data-letter") == target.attr("data-letter")){ 
     $(this).addClass('wordglow3').css('color', 'white'); 
      $('.minibutton').prop('disabled', true); 
     } else { 
      $(this).addClass('wordglow'); 
      $('.minibutton').prop('disabled', true); 
    } 


     b.remove().appendTo('table').css({ 
     'position' : 'absolute', 
     'top' : currentPos.top, 
     'left': currentPos.left 
     }); 
     { 
     b.animate({ 
      top : targetPos.top, 
      left : targetPos.left 
     }, 'slow', function() { 
      b.remove().css({ top: 0, left: 0 }).appendTo(target); 
      target.addClass('occupied'); 
     }); 
     } 
    } 
}); 

...() .after (e.target);