单击可拖放区域

Click draggable and drop zone

本文关键字：区域 拖放 单击      更新时间：2024-06-03

我在创建的游戏中有一个拖放事件。我不想把元素拖到放置区，而是希望能够点击可拖动的元素，然后点击放置区，并为其移动设置动画。这样用户就不必物理拖动它了吗？

如果是的话，我会从这里去哪里。。。

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



},

试试这个

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

    }
});

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

使用标志检查是否单击了它们。希望你能弄清楚剩下的。

相关文章：