0

作成しているゲームにドラッグアンドドロップイベントがあります。要素をドロップゾーンにドラッグする代わりに、ドラッグ可能なものをクリックしてからドロップゾーンをクリックし、その動きをアニメーション化できるようにしたいと思います。ユーザーが物理的にドラッグする必要がないようにすることはできますか？

もしそうなら、私はここからどこに行きますか...

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






},
4

2 に答える 2

0

http://jqueryui.com/demos/droppable/#revert間違った場所にドロップすると、この逆方向がどのようにアニメーション化されるかを確認しますか？そのアニメーションアクションを使用して、ドラッグされたオブジェクトの状態がtrueで、ドラッグ先の場所がtrueの場合に、ある場所から別の場所への移動をトリガーします。

フラグを使用して、クリックされているかどうかを確認します。うまくいけば、あなたは残りを理解するでしょう。

于 2012-08-01T09:18:27.957 に答える
0

これを試して...

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

       }); 


    }

});
于 2012-08-20T07:47:24.207 に答える