1

私が構築している小さなjqueryのドラッグ可能/ドロップ可能なアプリがあります。ここで見ることができます：

http://jsfiddle.net/franco13/AwnJA/1/

私は次のことを行う必要があり、jquery でのドラッグ アンド ドロップは初めてなので、ご協力いただきありがとうございます。

私はしたいです：

  1. 青いボックスがボックス 1 にドロップされるまで、ボックス 2 にドラッグされないようにする
  2. 青いボックスがボックス 1 にドロップされたら、再びドラッグ可能にして、クローンを残したままボックス 2 にドロップできるようにします。

このような：

$( init );

function init() {

  $('.teamEmblem').draggable({
//    containment: $('.teamEmblem').parent(), // this does not work
    cursor: 'move',
    helper: 'clone',
    obstacle: ".teamEmblem", // this does not work
    preventCollision: true, // this does not work
    revert: true
  });

  $('.winner').droppable({
    hoverClass: 'hovered',
    tolerance: 'touch',
    drop: handleCardDrop2
  });

}


function handleCardDrop2( event, ui ) {
    if (true) {

        ui.draggable.addClass('correct');
        ui.draggable.draggable('disable');
        $(this).droppable('disable');

        var dragged = ui.draggable.clone(true);
        dragged.position({
            of: $(this),
            my: 'left top',
            at: 'left top'
        }).css({
            position: 'absolute',
            display: 'block',
            margin: '0 auto'
        });
        ui.draggable.draggable('option', 'revert', false);
        $('body').append(dragged);
    }

}
4

2 に答える 2

2

最初のコードから少し変更する必要があります。そのようなものは機能するはずですが、すべてのニーズに適合するかどうかはわかりません。

{元の要素を再びドラッグできるようにするか、複製した要素を box1 にドラッグするかは不明です}

デモを見る

function handleCardDrop2(event, ui) {
    if (true) {
        var $dragged = ui.draggable,
            $draggedClone = $dragged.clone(),
            $target = $(event.target);

        if ($target.is('.box1')) $dragged.addClass('doppedBox1 correct');
        else if ($target.is('.box2') && $dragged.is(':not(.doppedBox1)')) return false;
        else if ($target.is('.box2')) $dragged.addClass('doppedBox2').draggable('disable');

        $(this).droppable('disable');

        $draggedClone.position({
            of: $(this),
            my: 'left top',
            at: 'left top'
        }).css({
            position: 'absolute',
            display: 'block',
            margin: '0 auto'
        });
        ui.draggable.draggable('option', 'revert', false);
        $('body').append($draggedClone);
    }
}
于 2013-04-28T13:53:58.017 に答える