Javascript 可拖动项目可以'；不要被拖过某个地方

第一次在这里发布，非常感谢您的帮助。我的目标是将图像从侧菜单（单击图像时弹出）拖动到表中。但是，拖动时，图像不能下降或超过某个部分（不可见的方形边界）

.container{
位置：相对位置；
显示：内联块；
溢出：隐藏；
高度：6vh；
宽度：6vh；
}
#博尔德{
边框：5px纯蓝色；
显示：表格；
边界半径：12px；
利润率：15px；
宽度：80%；
身高：95%；
}
身体{
字体大小：100%；
}
.组织者{
浮动：左；
宽度：100%；
保证金：自动；
最小宽度：600px；
最大宽度：12000像素；
身高：100%；
最小高度：400px；
最大高度：9000px；
边界塌陷：塌陷；
文本对齐：居中；
字体系列：冲击，木炭，无衬线；
字号：2.5em；
}
.td{
边框：5px纯红；
边界半径：12px；
}
.组织者tr：第一个孩子td{
边界顶部：0；
}
.组织者tr：最后一个孩子td{
边界底部：0；
}
.组织者：最后一个孩子
{
右边界：0；
宽度：75%；
}
.组织者：第一个孩子
{
左边框：0；
宽度：25%；
}
.导航{
身高：100%；
宽度：0；
排名：0；
左：0；
位置：固定；
背景色：#6194BC；
溢出x：隐藏；
填充顶部：60px；
过渡：0.5s；
z指数：1；
}
.导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s
}
.导航，关闭{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
颜色：红色；
}
#主要{
过渡：左边距。5s；
填充：16px；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}
.船坞台{
宽度：100%；
}
.码头运输署{
宽度：50%；
高度：100px；}
.dock img{
最大宽度：计算（100%-20px）；
高度：自动；
填充：10px；
}
.打开按钮{
字体大小：30px；光标：指针；宽度：5%；
}
赛尔先生{
身高：100%；
宽度：25%；
显示：内联块；
}
cel img先生{
身高：50%；
宽度：25%；
显示：内联块；
}

日程安排
函数openNav（）{
document.getElementById（“gallery”）.style.width=“250px”；
document.getElementById（“main”）.style.marginLeft=“250px”；
}
函数closeNav（）{
document.getElementById（“gallery”）.style.width=“0”；
document.getElementById（“main”）.style.marginLeft=“0”；
}
1.
2.
L
3.
4.
$（“.draggable1”）.draggable({
附于：'div#bord'，
遏制：“窗口”，
助手：'clone'，
开始：功能（事件、用户界面）{
$（ui.helper）.css（{'width'：“100px”，'z-index'：“1”}）；//拖动维度
}
});
$（“.drop”）.dropable({
公差：“指针”，
drop：函数（事件、用户界面）{
$（this.append（$（ui.helper.children（））；
}
});

该

窗口似乎是
安全壳的问题。我使用
document
进行了测试，效果更好

工作示例：
展示：

JavaScript

$(function() {
  function openNav(e) {
    e.preventDefault();
    $("#main").animate({
      marginLeft: 250
    }, 250, function() {
      $("#gallery").show("slow");
    });
  }

  function closeNav(e) {
    e.preventDefault();
    $("#gallery").hide()
    $("#main").css("margin-left", 0);
  }

  $(".openbutton").click(openNav);
  $(".close").click(closeNav);

  $(".draggable1").draggable({
    appendTo: 'div#bord',
    containment: "document",
    helper: 'clone',
    start: function(event, ui) {
      $(ui.helper).css({
        'width': "100px",
        'z-index': "1"
      }); //drag dimensions
    }
  });

  $(".drop").droppable({
    tolerance: 'pointer',
    drop: function(event, ui) {
      $(this).append($(ui.helper.children()));
    }
  });
});

您将看到我更新了一些代码以使用所有jQuery。只是个人喜好。
欢迎来到Stack Overflow。在工作示例中查看问题可能会有所帮助。jsfiddle.net是一种很好的方法。乍一看，我看不出你的代码会导致这个问题。您在浏览器控制台中看到任何错误或警报吗？如果您以前没有使用过jsfiddle.net，我为您的问题创建了一个工作示例：当我注释掉comment out
containment
选项时，我能够将项目拖过该点。感谢twisty，您在小提琴和转换方面确实帮助了我。但是没有错误，IMG的行为非常奇怪。虽然我没有设置可拖动区域的限制，但是图像没有移动过某个点，如果您能帮助我，那将是非常棒的。但是您确实使用
包容
选项设置了限制。正如我的示例所描述的那样，我的示例有点混乱。我将其设置为窗口，但是，图像移动不完整。@JasGill，正如我在示例中提到的，我使用了
文档
，这允许更好的移动。