Javascript 从jQueryUI包含中排除元素

我试图允许一个元素在另一个元素内部可拖动/调整大小，但不允许在该元素的另一个子元素的区域中拖动/调整大小

给定下表行：

我希望能够在表格行中的任何位置拖动蓝色区域并调整其大小，但不能拖动灰色表格单元格所在的位置（即，它将在前四个单元格内自由移动/调整大小，但在到达最后一个单元格时停止）

我可以使用

JQuery.draggable

和

JQuery.resizeable

中的

containment:'.middle tr'

或

containment:$el.nest（'tr'）、

（其中

$el

是蓝色元素的选择器）选项将其约束到表行，但我还没能找到一种方法把最后一列从容器中排除

如何从安全壳区域排除元素？

代码示例：

$（函数（）{
$（“td”）。可拖放({
drop：函数（事件、用户界面）{
var draggable=ui.draggable；
var newLeft=draggable.offset（）.left-draggable.closest（“.middle table”）.offset（）.left；
var childNum=Math.round（（newLeft+100）/100）；
var newContainer=$（this.closest（'tr'）.find（'td:nth of type（'+childNum+'）））；
draggable.css({
顶部：“”，
左：“”
});
newContainer.append（可拖动）；
},
});
$（“.planning spot”）。可调整大小({
电网：[10010000000]，
手柄：“e”，
遏制：“.middle tr”
}).each（函数（{
var$el=$（本）；
$el.draggable({
安全壳：$el.最近（'tr'），
轴：“x”，
});
});
});
*{
框大小：边框框；
保证金：0；
填充：0；
}
桌子{
边界塌陷：塌陷；
溢出：隐藏；
表布局：固定；
宽度：500px；
利润率：20px；
}
tr{
位置：相对位置；
背景：#FFF；
}
td，th{
位置：相对位置；
填充：0；
宽度：100px；
高度：30px；
边框：1px实心#000；
}
1.规划地点{
位置：绝对位置；
排名：0；
左：0；
高度：20px；
宽度：90px；
边界半径：10px；
保证金：5px；
文本对齐：居中；
z指数：1；
光标：指针；
颜色：#FFF；
宽度：290px；
背景：3CF；
}
1.没有计划{
背景：#CCC；
}

18/20
我通过检查拖动事件是否会导致与不可拖动的项目发生冲突来完成此操作

结帐代码如下：


$（函数（）{
var非易损坏项目=$（“无计划”）；
$（“td”）。可拖放({
drop：函数（事件、用户界面）{
var draggable=ui.draggable；
var newLeft=draggable.offset（）.left-draggable.closest（“.middle table”）.offset（）.left；
var childNum=Math.round（（newLeft+100）/100）；
var newContainer=$（this.closest（'tr'）.find（'td:nth of type（'+childNum+'）））；
draggable.css({
顶部：“”，
左：“”
});
newContainer.append（可拖动）；
},
});
函数onDrag（e，ui）{
var dragElemRect=ui.helper[0]。getBoundingClientRect（）；
对于（var i=0；i=rect2.right||
rect1.right您可以使用
getBoundingClientRect（）
确定可拖动区域，并将包含指定给一个数组，该数组采用每个可调整大小的元素的宽度


$（函数（）{
$（“td”）。可拖放({
drop：函数（事件、用户界面）{
var draggable=ui.draggable；
var newLeft=draggable.offset（）.left-draggable.closest（“.middle table”）.offset（）.left；
var childNum=Math.round（（newLeft+100）/100）；
var newContainer=$（this.closest（'tr'）.find（'td:nth of type（'+childNum+'）））；
draggable.css({
顶部：“”，
左：“”
});
newContainer.append（可拖动）；
},
});
$（“.planning spot”）。可调整大小({
电网：[10010000000]，
手柄：“e”，
遏制：“.middle tr”
}).each（函数（{
var$el=$（本）；
var bBoxTr=$el.closest（'tr'）[0]。getBoundingClientRect（）；
var bBoxTd=$el.closest（'tr'）.children（'no planning'）[0]。getBoundingClientRect（）；
变量x1=bBoxTr.x，y1=bBoxTr.y；
var x2=bBoxTr.right-bBoxTd.width，y2=bBoxTr.bottom；
$el.draggable({
//安全壳：$el.最近（'tr'），
安全壳：[x1，y1，x2-$el.width（）-10，y2]，
轴：“x”，
});
});
})；
*{
框大小：边框框；
保证金：0；
填充：0；
}
桌子{
边界塌陷：无塌陷；
溢出：隐藏；
表布局：固定；
宽度：500px；
利润率：20px；
}
tr{
位置：相对位置；
背景：#FFF；
}
td，th{
位置：相对位置；
填充：0；
宽度：100px；
高度：30px；
边框：1px实心#000；
}
1.规划地点{
位置：绝对位置；
排名：0；
左：0；
高度：20px；
宽度：90px；
边界半径：10px；
保证金：5px；
文本对齐：居中；
z指数：1；
光标：指针；
颜色：#FFF；
宽度：290px；
背景：3CF；
}
1.没有计划{
背景：#CCC；
}

18/20
令人印象深刻的是，我发现该方法的唯一问题是，当它发现碰撞时，它会将可拖动的元素拖放到右侧（不可拖动的元素所在的位置）那你就不能把它拖回左边，除非你放开鼠标，然后再把它捡起来。我明天上班的时候会进一步研究它，但看起来这个答案是正确的。我还想要一个可以调整大小的解决方案，也可以很好地拖动！什么是错误的