@ Алан: Нет проблем, это была довольно крутая проблема.

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

Пример:

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

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

Ответы на вопрос(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 который содержит эти элементы. Это должно быть ясно из примера.Каждый раз, когда вы перемещаете Draggabledivвызывается событие «перетаскивания», которое определяет, находятся ли красные прямоугольники внутри зеленых, и назначаетvalid класс к перетаскиваемомуdiv, Отбрасываемый объект принимает толькоvalid draggables.

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

 Dementic26 янв. 2017 г., 10:55
You can write **JQuery** like this
 Alan Whitelaw08 янв. 2011 г., 00:00
+1 за фантастически подробный ответ и работающий пример JSfiddle, спасибо
 Andrew Whitaker08 янв. 2011 г., 02:10
@ Алан: Нет проблем, это была довольно крутая проблема.

Ваш ответ на вопрос