Это немного поздно, но я думаю, вы могли бы использовать этот подход, который я попробовал, когда столкнулся с подобной ситуацией. Преимущество здесь в том, что в нем нет дополнительных плагинов или сценариев, и вам также не нужно вводить в него опрос с высокой производительностью.
В этом методе используются встроенные методы и события, которые может предложить Jquery.
Хорошо, достаточно сказано, вот метод решения:
Скажем, если у вас есть два элемента (изображения в моем случае), и вы не хотите, чтобы они перекрывались или обнаруживали, когда они есть, сделайте два элемента «выпадающими» и заставьте их «принимать» друг друга:
$([div1, div2]).droppable(CONFIG_COLLISSION_PREVENTION_DROPPABLE);
CONFIG_COLLISSION_PREVENTION_DROPPABLE выглядит следующим образом:
var originatingOffset = null;
CONFIG_COLLISSION_PREVENTION_DROPPABLE = {
tolerance: "touch",
activate : function (event, ui) {
// note the initial position/offset when drag starts
// will be usedful in drop handler to check if the move
// occurred and in cae overlap occurred, restore the original positions.
originatingOffset = ui.offset;
},
drop : function (event, ui) {
// If this callback gets invoked, the overlap has occurred.
// Use this method to either generate a custom event etc.
// Here, i used it to nullify the move and resetting the dragged element's
// position back to it's original position/offset
// (which was captured in the 'activate' handler)
$(ui.draggable).animate({
top: originatingOffset.top + "px",
left: originatingOffset.left + "px"
}, 300);
}
}
Обработчики «activ» и «drop» относятся к событиям «dropactivate» и «drop» плагина «droppable»
Здесь ключом является обратный вызов drop. Всякий раз, когда любой из двух элементов перекрывается, и они сбрасываются друг на друга, вызывается «отбрасывание». Это место для обнаружения и выполнения действий, может быть отправка пользовательских событий или вызов других действий (здесь я решил вернуть позиции перекрывающегося элемента в исходную позицию, когда началось перетаскивание, которое было зафиксировано в обратном вызове 'activate'). 1011 *
Вот и все. Никаких опросов, никаких плагинов, только встроенные события.
Ну, могут быть сделаны другие оптимизации / расширения, это был просто первый выстрел из моей головы, который сработал:)
Вы также можете использовать события «dropover» и «dropout», чтобы сигнализировать и создавать визуальную обратную связь для пользователя о том, что два элемента перекрываются, хотя они могут все еще находиться в движении.
var CLASS_INVALID = "invalid";
// .invalid { border: 1px solid red; }
...
$.extend(CONFIG_COLLISSION_PREVENTION_DROPPABLE, {
over : function (event, ui) {
// When an element is over another, it gets detected here;
// while it may still be moved.
// the draggable element becomes 'invalid' and so apply the class here
$(ui.draggable).addClass(CLASS_INVALID);
},
out : function(event, ui) {
// the element has exited the overlapped droppable now
// So element is valid now and so remove the invalid class from it
$(ui.draggable).removeClass(CLASS_INVALID);
}
});
Надеюсь, это поможет!