javascript - 可拖动的包含选项不会限制元素的右边界或下边界吗？

我想在div类中包含一个可拖动项。我有以下代码

HTML：

<div class = 'right'>
<div id = 'frame1'>
      <iframe id = 'iframe1' src = 'http://www.wsj.com'></iframe>
    </div>
</div>
​

CSS：

.right {
        position: absolute;
        width: 60%;
        height: 100%;
        left: 25%;
        top: 20%;
        background-color: #006400;
       }

#frame1 {
              position: absolute;
              float: left;
              width: 45%;
              height: 75%;
              top: 10%;
              left: 2%;
              margin: 10px;
              border-style: solid;
              border-width: 10px;
         }
#frame2 {
              position: absolute;
              float: right;
              width: 45%;
              height: 75%;
              top: 10%;
              right: 2%;
              margin: 10px;
              border-style: solid;
              border-width: 10px;
        }
#frame3 {
            position: absolute;
            float: center;
            width: 45%;
            height: 75%;
            top: 10%;
            left: 25.5%;
            margin: 10px;
            border-style: solid;
            border-width: 10px;
        }
#iframe1 {
          width: 181%;
          height: 182%;
          top: 50%;
          left: 50%;
          zoom: 1.00;
          -moz-transform: scale(0.55);
          -moz-transform-orgin: 0 0;
          -o-transform: scale(0.55);
          -o-transform-origin: 0 0;
          -webkit-transform: scale(0.55);
          -webkit-transform-origin: 0 0;
         }

JavaScript：

$("#frame1, #frame2, #frame3").draggable({containment: ".right", stack: "div"});​​

可拖动项在div类的左边界和上边界的移动受到限制，但是对于我可以将对象向右或向右移动的距离似乎没有限制。为了使div类的所有四个侧面都包含可拖动选项，我需要在代码中进行哪些更改？

jsFiddle here

最佳答案

是的，只需为您的iframe更新以下CSS。我希望这将帮助您获得div类所有四个侧面上包含的可拖动选项。

#iframe1 {
          position: absolute;
          width: 181%;
          height: 182%;
          zoom: 1.00;
          -moz-transform: scale(0.55);
          -moz-transform-orgin: 0 0;
          -o-transform: scale(0.55);
          -o-transform-origin: 0 0;
          -webkit-transform: scale(0.55);
          -webkit-transform-origin: 0 0;
         }

在这里，我用答案更新了jsfiddle。

关于javascript - 可拖动的包含选项不会限制元素的右边界或下边界吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13992831/