如何在第一个实例完成后在jquery中复制可拖动/可放置的实例 [英] How to replicate a draggable/droppable instance in jquery after first instance completed

问题描述

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

I have a small jquery draggable/droppable app I am building. You can see it here:

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

我需要执行以下操作，我是新手，在jquery中拖放，所以谢谢协助。

I need to do the following and I am new to dragging and dropping in jquery, so thank you for assisting.

我希望：

1. 防止蓝盒子出现拖动到方框2，直到它被放入方框1


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

}

推荐答案

只需对您的起始代码进行少量更改即可，但是我不确定它是否符合您的所有需求：

Just little changes are necessary from your starting code, something like that should work but im not sure it fit all your needs:

{我不确定您是否想要原始元素可以再拖动，或者克隆元素在box1中拖动}

{im not sure you want the original element to be draggable again or the cloned element dragged in 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);
    }
}

这篇关于如何在第一个实例完成后在jquery中复制可拖动/可放置的实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！