Перетащите с 2 мишенью

Question

Я ищу пример перетаскивания, в котором у элемента перетаскивания есть две отдельные области, которые должны совпадать с двумя областями сбрасывания.

Пример:

Я бы хотел, чтобы синий элемент перетаскивания вернулся, если только он не упал в положение, где каждый из его красных детей приземляется на зеленую область.

В идеале я хотел бы использовать jquery ui (поскольку у меня есть опыт работы с ним), но любая библиотека javascript подойдет, спасибо заранее.

Answer 1

Это можно сделать с помощью комбинации параметров draggable / droppable. Учитывая HTML, как это:

<div id="blue" class="valid">
    <div id="red-one" class="red"></div>
    <div id="red-two" class="red"></div>
</div>

<div id="green-container">
    <div id="green-one" class="green">
    </div>
    <div id="green-two" class="green">
    </div>
</div>

(без CSS, я добавил некоторые правила, см. В скрипте ниже).

Вы можете написать JavaScript так:

function isInside(one, other) {
    return one.offset().left >= other.offset().left &&
        one.offset().top >= other.offset().top &&
        one.offset().top + one.height() <= other.offset().top + other.height() &&
        one.offset().left + one.width() <= other.offset().left + other.width();
}

$("#blue").draggable({
    drag: function(event, ui) {
        var $this = $(this);
        var $reds = $this.children(".red");
        var $greens = $("#green-container").children(".green");
        var firstRed = $reds.first();
        var firstGreen = $greens.first();
        var secondRed = $reds.last();
        var secondGreen = $greens.last();

        if (isInside(firstRed, firstGreen) && isInside(secondRed, secondGreen)) {
            $this.addClass('valid');
        }
        else {
            $this.removeClass('valid');
        }       
    },
    revert: 'invalid'
});


$("#green-container").droppable({ accept: ".valid" });

Проверьте это здесь: http://jsfiddle.net/andrewwhitaker/g6FKz/

Примечания:

• По какой-то причине мне пришлось изначально применить класс 'valid' к 'blue' div, иначе целевой объект сбрасывания не будет принимать перетаскиваемый элемент, даже если он был действительным (был бы признателен за некоторую информацию об этом). Не уверен, что с этим может быть ошибка в jQueryUI. Не так уж и много.
• Целевой предмет сброса - это не два зеленых элемента, а белый div, содержащий эти элементы. Это должно быть ясно из примера.
• Каждый раз, когда вы перемещаете перетаскиваемый div, вызывается событие «перетаскивания», которое определяет, находятся ли красные прямоугольники внутри зеленых, и назначает класс valid перетаскиваемому div. Пропадающий объект принимает только valid draggables.

Надеюсь, это поможет!