Click draggable and drop zone

Question

I have a drag and drop event in a game I am creating. Instead of dragging the element to the drop zone, I want to be able to click the draggable then the drop zone and animate the movement of it. Can it be done so the user doesn't have to physically drag it?

If so, where would I go from here...

$('.drag').draggable({

helper: 'clone',
snap: '.drop',
grid: [60, 60],
revert: 'invalid',
snapMode: 'corner'
});


$('.drop').droppable({
drop: function(event, ui) {
    word = $(this).data('word');

    guesses[word].push($(ui.draggable).attr('data-letter'));
    console.log($(event));
    console.log($(ui.draggable).text());

    console.log('CHECKING : ' + $(this).text() + ' against ' +                  $(ui.draggable).text().trim());


    if ($(this).text() == $(ui.draggable).text().trim()) {

        $(this).addClass('wordglow3');
    } else {
        $(this).addClass('wordglow');
    }
    console.log('CHECKING : ' + $(this).text() + ' against ' + $(ui.draggable).text().trim());


    console.log(guesses);

    if (guesses[word].length == 3) {
        if (guesses[word].join('') == word) {
            $('td[data-word=' + word + ']').addClass('wordglow2');

        } else {
            $('td[data-word=' + word + ']').addClass("wordglow4");
            guesses[word].splice(0, guesses[word].length);
        }
    }






},

Answer 1

http://jqueryui.com/demos/droppable/#revert see how this reverse animates when dropped in the wrong location? Use the animation action of that and trigger the move from one location to another when the state of the dragged object is true and the location to be dragged to is true.

Use flags to check if they are clicked or not. Hopefully you will figure out the rest.

Answer 2

Try this...

$('.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) {
    target.addClass("occupied");
    $(".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);

       }); 


    }

});