克隆动画属性

Question

我最近更改了我的拖放游戏，以便让年轻用户更轻松。

基本上不是将字母拖放到拼写单词中，而是现在单击该字母，并自动将其移动到正确的区域。

我的问题是，当我有拖放功能的字母会克隆，所以你可以在游戏中多次使用每一个。现在他们没有。

在拖放事件之外还有其他方法吗？

$('.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'); 
     }); 
     } 
    } 
}); 

这是我在拖累使用拖放功能...

$('.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

你可以使用下面的手动克隆你的元素：

$（e.target）.clone （）。经过（e.target）;