jQuery перетаскиваемая проблема с «прокруткой» на объекте внутри переполнения: скрытый контейнер при использовании appendTo: «body»

Question

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

Сначала я попытался использовать обратные вызовы «over» и «out» для droppables, но это не сработало, потому что зависание от одного droppable к другому (внутри одного контейнера) заставляло его думать, чтомышь покинула контейнер ...

Так что мой следующий подход состоял в том, чтобы в обратном вызове начала перетаскивания создать прослушиватель событий для mouseenter и mouseleave в контейнере, а затем прекратить прослушивание обратного вызова для остановки перетаскивания..

Однако это приводит к полному сумасшествию ... Если вы посмотрите на страницу моего примера:

http://collinatorstudios.com/www/jquery_draggable_test.html

При перетаскивании прямоугольника в красную зону сброса,вы должны увидеть «enter», когда событие mouseenter срабатывает, и «выйти», когда происходит mouseleave. Однако, просто перетащите прямоугольник на внутреннюю часть контейнера.использует "отпуск", чтобы появиться миллионы раз ..... Я не могу понять, почему это происходит, и какое решение есть в моей проблеме, чтобы я мог делать то, что мне нужно.Я работаю над этим уже почти 4 часа и схожу с ума из-за того, что кажется, что это должно быть так просто достичь.

Любая помощь будет принята с благодарностью ... Спасибо.

Answer 1

Попробуйте добавить бросаемый предмет для контейнера:

$('#drop_zone_container').droppable({
    over: function(){ feedback.text('enter')},
    out: function(){feedback.text('leave')}
});

Answer 2

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

И, как сказал ZDYN (+1 к нему), вам нужно включить сбрасываемый код, но вместо использования контейнера используйте зоны внутри ... вот демо 1004 * и полный код ниже.

var feedback = $('#feedback');

$('.item').draggable({
    revert: true,
    zIndex: 999,
    cursor: 'move'
});

$('.drop_zone').droppable({
    drop: function(event, ui) {
        ui.draggable.appendTo($(this));
    }
}).bind('dropover dropout', function(e) {
    var id = this.id;
    feedback.text(e.type === 'dropover' ? 'Over: ' + id : 'Out: ' + id);
});