0

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 クラスの 4 つの側面すべてにドラッグ可能なオプションを含めるには、コードで何を変更する必要がありますか?

ここでjsFiddle

4

1 に答える 1

4

はい、iframe の次の css を更新するだけです。これが、div クラスの 4 つの側面すべてに含まれるドラッグ可能なオプションを取得するのに役立つことを願っています。

#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を更新しました。

于 2013-01-03T13:47:17.397 に答える