Jquery ui 可拖动UI-如何定义不可拖动区域？

我正在开发一个可拖动的功能。在这里，我创建了一个区域，请参见附件中的屏幕截图，我必须在其中拖动图像。但还有一个不可拖动的区域，我必须禁用可拖动功能

截图：

D=可拖动，U=不可拖动

---

如果有人能在这个问题上提供帮助，那就太好了。您的帮助可能会很感激。

可拖动容器使用长方体模型来标识可拖动项目的边界

包含类型：选择器或元素或字符串或数组，默认值：false

约束拖动到指定元素或区域的边界内。支持多种类型：

选择器：可拖动元素将包含在选择器找到的第一个元素的边界框中。如果未找到任何元素，则不会设置任何包含。 元素：可拖动的元素将包含在此元素的边界框中。 字符串：可能的值：父级、文档、窗口。 数组：以[x1，y1，x2，y2]形式定义边界框的数组。 参考：

因此，这意味着您需要创建复杂的框或在拖动回调中构建碰撞检测。触发拖动时，将向其传递一个事件和ui对象。ui.position可以操作：

辅助对象的当前CSS位置为{top，left}对象。可以更改这些值以修改图元的位置。这对于自定义包含、捕捉等非常有用

这可能很难，所以如果这是一个乞丐项目或小的事情，考虑使用冲突插件：

考虑下面的原始示例

$function{ 函数logobj{ var str=T:+obj.top+L:，+obj.left+，R:+obj.right+，B:+obj.bottom； $log.htmlstr； } 函数getObjectPosobj{ var oPos=目标位置； oPos.right=oPos.left+obj.width； oPos.bottom=oPos.top+obj.height； 返回OPO； } 函数冲突a，b{ var col=假； var侧； var r1=getObjectPosa； var r2=getObjectPosb； /* https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection rect1.xrect2.x&&rect1.yrect2.y */ 如果r1.leftr2.left&&r1.topr2.top{ col=真； } 返回{ 上校：上校， 右：r1.右>r2.左， 左：r1.左>r2.右， 底部：r1.底部>r2.底部， 顶部：r1.top>r2.top }; } $draggable.draggable{ 安全壳：安全壳包装， 开始：function，ui{ ui.helper.dataprev-pos，getObjectPosui.helper； }, 拖动：function，ui{ var oPrevPos=ui.helper.dataprev-pos； var oPos=getObjectPosui.helper； console.pos、oPos； logoPos； $containment wrapper.no-drag.eachfunctionind，el{ var c=collisionui.helper，$el； var col=c.col； var侧； 如果上校{ 切换为真{ 案例c.top： 侧面=顶部； 打破 案例c.左： 侧面=左侧； 打破 案例c.底部： 侧面=底部； 打破 案例c.权利： 侧面=右侧； 打破 } console.logCollision:+col，side，c； 开关侧{ 案例左： 案例权利： ui.position.left=oPrevPos.left 打破 案例顶部： 箱底： ui.position.top=oPrevPos.top 打破 } }否则{ console.logCollision:+c.col，c； ui.helper.dataprev-pos，oPos； } }; } }; }; .拖拉{ 宽度：100px； 高度：100px； 浮动：左； 保证金：0； 填充：0； 背景：CCC； } 安全壳包装{ 宽度：400px； 高度：250px； 边框：2个实心ccc； 填充：10px； 位置：相对位置； } 安全壳包装，无阻力{ 宽度：100px； 高度：100px； 边框：2个实心ccc； 顶部：168px； 左：318px； 位置：绝对位置； } .产出{ 边缘顶部：-2米； }

+-------+
|       |
|   D   |
|       |
|   +---+
|   |   |
|   | U |
|   |   |
+---+---+