jquery draggable containment:表的子集

时间:2010-08-24 20:42:18

标签: jquery jquery-ui draggable

如何使收容成为细胞的子集。即省略标题行和最左边的列?

1 个答案:

答案 0 :(得分:6)

最好的方法是只为一个选择器发送应该构成收容的字段,但由于这不起作用,我摆弄了另一种解决方案。我不会说这是非常理想的,但我会试一试。

找到你应该拖动可拖动的单元格的极点(左,上,右,下),并将这些点设置为可拖动的包含。在我的例子中,我给了这些元素(表的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/请注意,红色方块仅用于显示收容区域