Question

我正在构建一个小型的jquery draggable / droppable应用程序。你可以在这里看到它：

我需要执行以下操作，并且我很想在jquery中拖放，所以谢谢你的协助。

我希望：

防止蓝框被拖到框2，直到它被放入框1
一旦蓝色方框放入方框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);
    }

}

Answer 1

只需对您的起始代码进行少量更改，类似的内容应该可以正常工作，但我不确定它是否符合您的所有需求：

{我不确定您是否希望再次拖动原始元素或在box1中拖动克隆元素}}

SEE DEMO

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);
    }
}

Answer 2

为了回答第1部分，我想出了类似fiddle

的内容

基本概念是：

为您的回合添加一个索引，因为它们被推断并且不够明确
将数据对象附加到每个可以在其中移动的对象并跟踪它们在其中完成的内容
测试他们的数据对象

像这样。 请注意，我重新定义了li以将先决条件作为属性，但您也可以使用该数据 <li prereq="in1" class="winner first">box 1</li>）

var order = ['in1', 'in2', 'in3'];  // round index
// see your code
$('.temEmblem').draggable({blah}).data('complete', {
    'in1': true,
    'in2': false,
    'in3': false
});  // attach data element to draggable element

// see your code

function handleCardDrop2(e, ui){

    // see your handleCardDrop2 code

    var currentRd = $(this).attr('prereq');
    var nextRd = order[order.indexOf($(this).attr('prereq')) + 1];
    if (ui.draggable.data('complete')[currentRd]) {

        ui.draggable.data('complete', {
            nextRd: true
        });
        // do the drop
    } else { 
        // bail 
    }

    // handleCardDrop2 code

});

如何在第一个实例完成后在jquery中复制可拖动/可放置的实例

2 个答案: