Javascript jqueryui包含：'；家长'；不起作用

正如您在这里看到的，类为.foo的div是可拖动的，并且具有containment:“parent”选项，因此它必须保持在其父div的边界内，即mainDiv，但它没有。为什么呢

$（文档）.ready（函数（）{
$（“#deviceName li”）。可拖动({
助手：“克隆”，
回复：“无效”
});
$（'#接口li'）。可拖动({
助手：“克隆”，
回复：“无效”
});
$（'#显示li'）。可拖动({
助手：“克隆”，
回复：“无效”
});
$（'#输出li'）。可拖动({
助手：“克隆”，
回复：“无效”
});
$（'.foo'）。每个（函数（）{
$（此）。可拖动({
包含：$（this.parent（））
});
});
$（'#mainDiv'）。可拖放({
drop：函数（事件、用户界面）{
if（ui.draggable.hasClass（'foo'））{
}
否则{
var title=ui.draggable.text（）.trim（）；
变量项=$（''）。追加（''+标题+''）；
item.draggable（）；
$（本）。追加（项目）；
}
}
});
});
html{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
背景#2c2c；
背景：url（数据：image/svg+xml；base64，PD94BWGDMVYC2LVBJ0IMS4WIIA/PGO8C3ZNIHHTBG5ZPSJODHRWOI8VD3D3LNCZYLM9YZYD8YMDAWL3N2ZYIGD2LKDGGG9IJEWMCUIIGDMLLD0JVED0IMCAWIDEGMCHC2VYDMV3BC3BLY3R3RYXYBRP00IBM9UZSI+CIAGPGG8BMVHCKDYWYWYW5LKYKYW5LKYZZY2TCZ2TZ2VUZ2VUZ2VUZJJJJJJJJJJJJJJJ0IDV9IJ0IMV9V9IZZZZZZZZY2V9C）3.vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvC3RVCCBVZMZZZQ9IJEWMCUIHN0B3ATY29SB3I9IIMXMZMZMTMIIHN0B3ATB3BHY2L0ET0IMSIVPGOGIDWGLUZWFYR3JHZGLLBNQ+CIAGPHJLY3QGED0IMCIGE0IMCIGD2LKDG9IJEIGHLDODD0IMSIGZMLSB0IDXKCNNCMFKLXVJZ2CTZ2VZ2VZ2VZVZ2VZVZVZ2VUZZZVZZZZZZZZ2VZZZZZJJK9MCC+；
背景：-莫兹线性梯度（左，#2C2C0%，#3d3d3d 37%，35353566%，35353566%，35353566%，35313100%）；
背景：-webkit渐变（线性、左上、右上、颜色停止（0%、#2c2c2c）、颜色停止（37%、#3D3D）、颜色停止（66%、353535）、颜色停止（66%、353535）、颜色停止（100%、35313））；
背景：-webkit线性梯度（左，#2C2C0%，#3D3D37%，35353566%，35353566%，353535100%）；
背景：-o-线性梯度（左，#2C2C0%，#3d3d3d 37%，35353566%，35353566%，35353566%，35313100%）；
背景：-ms线性梯度（左，#2C2C0%，#3d3d3d 37%，35353566%，35353566%，35353566%，35313100%）；
背景：线性梯度（向右，#2C2C0%，#3D3D37%，35353566%，35353566%，353535100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#2c2c2c'，endColorstr='#131313'，GradientType=1）；
}
身体{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
#左撇子{
显示：内联块；
宽度：16%；
最小高度：100%；
右边框：3倍纯白；
框大小：边框框；
浮动：左；
保证金：0；
填充物：5px；
}
#mainDiv{
显示：内联块；
宽度：64%；
最小高度：100%；
右边框：3倍纯白；
框大小：边框框；
浮动：左；
保证金：0；
填充物：5px；
}
#右舵{
显示：内联块；
宽度：20%；
框大小：边框框；
最小高度：100%；
浮动：左；
保证金：0；
填充物：5px；
}
傅先生{
最大宽度：250px；
文本对齐：居中；
最小高度：50px；
边框：1px纯白；
边界半径：10px；
}
.foo表{
宽度：100%；
}
.thClass{
边界半径：10px；
边框底部：1px纯白；
保证金：0；
填充：0；
宽度：100%；
文本对齐：居中；
}

试验

设备名


项目1



接口


项目2



展示


项目3



输出


项目4




尝试以下操作：

$('.foo').each(function(){
    $(this).draggable({
        containment: $(this).parent()
    });
});

原因是包含选项也可以是jquery选择器或实际元素

你可以试试这个

上面的代码是在创建元素之前调用的。因此，将它们包装在函数中可以在创建新对象时调用它

function foo(){
  $('.foo').each(function() {
    $(this).draggable({
      containment: $(this).parent()
    });
  });
}

工作片段


$（文档）.ready（函数（）{
$（“#deviceName li”）。可拖动({
助手：“克隆”，
回复：“无效”
});
$（'#接口li'）。可拖动({
助手：“克隆”，
回复：“无效”
});
$（'#显示li'）。可拖动({
助手：“克隆”，
回复：“无效”
});
$（'#输出li'）。可拖动({
助手：“克隆”，
回复：“无效”
});
函数foo（）{
$（'.foo'）。每个（函数（）{
$（此）。可拖动({
包含：$（this.parent（））
});
});
}
$（'#mainDiv'）。可拖放({
drop：函数（事件、用户界面）{
if（ui.draggable.hasClass（'foo'））{
}否则{
var title=ui.draggable.text（）.trim（）；
变量项=$（''）。追加（''+标题+''）；
item.draggable（）；
$（本）。追加（项目）；
foo（）
}
}
});
})；
html{
保证金：0；
填充：0；
宽度：100%；
function foo(){
  $('.foo').each(function() {
    $(this).draggable({
      containment: $(this).parent()
    });
  });
}