1

最近、ドラッグアンドドロップゲームを変更して、若いユーザーが使いやすくしました。

基本的に、文字をドラッグアンドドロップして単語を綴る代わりに、文字をクリックすると、正しい領域に自動的にアニメーション化されます。

私の問題は、ドラッグアンドドロップ機能を使用すると、文字が複製されるため、ゲームでそれぞれを複数回使用できるようになることです。今ではそうではありません。

ドラッグアンドドロップイベント以外でそれを行う別の方法はありますか？

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


    if(b.attr("data-letter") == target.attr("data-letter")){
        $(this).addClass('wordglow3').css('color', 'white');
            $('.minibutton').prop('disabled', true);
        } else {
            $(this).addClass('wordglow');
            $('.minibutton').prop('disabled', true);
    }


        b.remove().appendTo('table').css({
        'position' : 'absolute',
        'top' : currentPos.top,
        'left': currentPos.left
        });
        {
        b.animate({
           top  : targetPos.top,
            left : targetPos.left
        }, 'slow', function() {
            b.remove().css({ top: 0, left: 0 }).appendTo(target);
            target.addClass('occupied');
        });
      }
   }
});

これは私がドラッグアンドドロップ機能で使用したものです...

    $('.drag').draggable({
    helper: 'clone'
});
4

2 に答える 2

1

要素をclone（）し、クローンをanimate（）することができます。

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

（補足として、要素がすでに親を持っている場合は要素が移動されるため、remove()前に呼び出す必要はありません。）appendTo()

于 2012-08-16T08:44:47.327 に答える
0

次を使用して、要素を手動で複製できます。

$（e.target）.clone（）。after（e.target）;

于 2012-08-16T08:42:01.960 に答える