3

JQuery Draggable プラグインを使用しています。ユーザーがドラッグ可能な画像を移動 (および最終的にはサイズ変更) できる画像編集コントロールを作成しようとしています。ここのデモを見ると、灰色のボックスをドラッグしてフレームの境界を超えると、スクロール バーが表示され、ドラッグし続けることができることがわかります。スクロールバーなしで同じ機能を実現したいと思います。画像をドラッグできるようにする必要があります。画像がフレームの境界の外に出た場合は、フレームの下にスライドするように見えるはずです。フレームが大きくなったり、スクロールバーが表示されたりしてはいけません。これは可能だと思いますが、見つけたドキュメントではそうする方法が見つかりませんでした。これが私のコードです：

<head>
<meta charset="UTF-8" />
<title></title>
    <style type="text/css">
        #draggable { width: 400px; height: 300px; cursor:pointer;}
        #container{overflow:hidden; height: 500px; width: 500px; border: solid 1px black;}
        #slider{margin: 10px; border: solid 1px black; height: 300px; vertical-align:middle;}
    </style>

      <%--came from http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.js--%>
    <script src="scripts/jquery.js" type="text/javascript"></script>

    <%--came from //ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.js--%>
    <script src="scripts/jquery-ui.js" type="text/javascript"></script>

      <script type="text/javascript">
          $(document).ready(function() {
              $("#draggable").draggable({ opacity: 0.35 }); //, helper: 'original', containment: 'parent'
          });
    </script>
</head>

<body>
    <div id="container">
        <img  id="draggable" src="images/96.jpg" width="400px" height="300px" alt="Click this image to drag it around" />
    </div>
</body>

質問: ドラッグ中にスクロールバーを表示せずに、ドラッグ可能オブジェクト<img>を親の下にスライドさせるにはどうすればよいですか?<div>

更新：これについて考えれば考えるほど、質問を言い直すべきだと思います。私が本当にやりたいことは、親<div>タグをドラッグ可能の周りのマスク/クリッピング パスのようにすること<img>です。内部の画像は実際には よりも大きくなる可能性がありますが、 にある<div>ものだけ<div>が表示されます。<img>好きなように内側をドラッグできるはず<div>です。

4

2 に答える 2

3

設定する必要があるようです：

overflow:hidden;

あなたのdivのスタイルで。これにより、スクロールバーが表示されなくなります。

于 2011-05-27T19:08:01.813 に答える