Оптимальным было бы просто отправить селектор для полей, которые должны составлять защитную оболочку, но, поскольку это не сработает, я нашел альтернативное решение. Я бы не сказал, что это очень оптимально, но я попробую.
Найдите крайние точки (слева, сверху, справа, снизу) ячеек, по которым вы должны перетаскивать перетаскиваемый объект, и установите эти точки в качестве элемента удерживаемого элемента. В моем примере я дал этим элементам (td
таблицы) класс containmentTD
. Он не принимает во внимание границы, заполнение и т. Д., Поэтому его необходимо настроить, если это важно.
//The TD elements that are to be included when
//we find the dimentions of the containment
var td_elements = $(".containmentTD");
//This will hold the extreme points of the containment
var points = {
left: td_elements.eq(0).position().left,
top: td_elements.eq(0).position().top,
right: 0,
bottom: 0
};
//Find the points of the containment
td_elements.each(function() {
var t = $(this);
var p = t.position();
var width = t.width();
var height = t.height();
points.left = Math.min(p.left, points.left);
points.top = Math.min(p.top , points.top );
points.right = Math.max( points.right, p.left + width);
points.bottom = Math.max( points.bottom, p.top + height);
});
//This will only work "perfectly" when all draggables have
//the same dimentions
points.bottom -= $("div.draggable:first").height();
points.right -= $("div.draggable:first").width();
$("div.draggable").draggable({
containment: [points.left, points.top, points.right, points.bottom]
});
Вот демонстрация: http://jsfiddle.net/uTyTY/ Обратите внимание, что красный квадрат предназначен только для визуализации области удержания