Question

I have recently changed my drag and drop game to make it easier for young users.

Basically instead of dragging and dropping letters to spell words you now click the letter and it animates into the correct area automatically.

My problem is when I had the drag and drop function the letters would clone so you could use each one more than once in a game. Now they don’t.

Is there a different way of doing that outside the drag and drop event?

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

This is what I used in the drag and drop function…

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

Answer 1

You can clone() the element and animate() the clone:

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");
    });
}

(As a side note, you do not have to call remove() before appendTo(), as the element will be moved if it already has a parent.)