Javascript jQuery UI可拖动：拖动比容器大的div

我在使用jQueryUIDragable元素时遇到了一个问题。我希望能够拖动一个比容器大的div元素。所以我尝试在容器上使用position:relative，在draggable元素上使用position:absolute，但它不起作用。基本上，我想要实现的是：

您可以在此处查看下面的代码示例：

我的代码：

外部

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

HTML

<div id="containment-wrapper">
  <div id="draggable3" class="draggable ui-widget-content">
    <p>I'm contained within the box</p>
  </div>
</div>

---

您需要做的是在可拖动元素上放置一个负边距，等于可以将其拖动到容器外部的像素距离。无论拖动位置是相对位置还是绝对位置，这都应该有效

很可能，您希望负边距等于两个容器大小之间的差值，以便draggable始终覆盖父容器。（这就是javascript拖放/裁剪工具通常的工作方式。）因此在您的情况下：

.draggable { 
  margin: -250px -50px;
  top: 250px;
  left: 50px;
}

---

谢谢你的快速回复！我试过了，但是现在可拖动对象（文本）的起始位置在容器的外面。。我想它的位置，以便您可以看到这样的文字（0,0）。我更新了链接，让你明白我的意思！好的，为什么不设置初始css top和left来进行补偿呢？我会更新我的答案。

$(function() {
    $( "#draggable3" ).draggable({ cursor: "move", containment: "#containment-wrapper" });
  });

.draggable { 
  margin: -250px -50px;
  top: 250px;
  left: 50px;
}