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

尝试这个...

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

http://jqueryui.com/demos/droppable/#revert看看这个反向动画在放置在错误的位置时如何？当被拖动对象的状态为真且要拖动到的位置为真时，使用其动画动作并触发从一个位置到另一个位置的移动。

使用标志来检查它们是否被点击。希望你能弄清楚其余的。

于 2012-08-01T09:18:27.957 回答