Question

我正在制作的游戏中有拖放事件。我希望能够单击可拖动然后放置拖放区域并为其移动设置动画，而不是将元素拖动到放置区域。是否可以这样做，用户无需物理拖动它？

如果是的话，我会从哪里开始......

$('.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看到当放在错误的位置时这种反向动画如何？当拖动对象的状态为真且要拖动的位置为真时，使用其动画操作并触发从一个位置移动到另一个位置。

使用标记检查是否单击了它们。希望你能弄清楚其余部分。

Answer 2

试试这个......

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

       }); 


    }

});

单击可拖动和放置区域

2 个答案: