ドラッグ移動ボックスにおける、移動中のスクロール可否設定

jQuery UI の Draggable プラグインを使った、ドラッグして移動できるボックスにおける、ボックス移動中のスクロール可否設定。ウィンドウや親要素を、スクロールさせたくない場合、scroll オプションに false を指定。ウィンドウや親要素を、スクロールさせたい場合、scroll オプションに true を指定する。

実装例(サンプル)

scroll: false

scroll: true

実装例について

実装例(サンプル)は、containment オプションに、parent を指定し、親要素内だけでしか移動できないようにし、スクロールできない移動ボックスとスクロールできる移動ボックスを並べた。

実装例の動作について

  • 「scroll: false」と書いてあるボックスを、ドラッグして、移動させ、破線で示した親要素の枠に近付けてスクロールしようとしてもスクロールしない。
  • 「scroll: true」と書いてあるボックスを、ドラッグして、移動させ、破線で示した親要素の枠に近付けてスクロールしようとすると、どこまでもスクロールする。

実装例のソースコード

読み込み

読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。

まとめて読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script>
個別に読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="ui/jquery.ui.draggable.js"></script>

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-ui-draggable' ) . draggable( {
        containment: 'parent',
        scroll: false,
    } );
    jQuery( '#jquery-ui-draggable-2' ) . draggable( {
        containment: 'parent',
        scroll: true,
    } );
} );
// -->
</script>

CSS

<style>
<!--
#jquery-ui-draggable-wrap {
    overflow: scroll;
    width: 100%;
    height: 300px;
    border-style: dashed;
}
#jquery-ui-draggable , #jquery-ui-draggable-2 {
    float: left;
    width: 100px;
    height: 100px;
    padding: 20px;
    margin: 10px;
    border-radius: 10px;
    font-size: 13px;
    cursor: move;
}
-->
</style>

HTML

<div id="jquery-ui-draggable-wrap" class="ui-widget-content">
    <div id="jquery-ui-draggable" class="ui-widget-content">
        <p>scroll: false</p>
    </div>
    <div id="jquery-ui-draggable-2" class="ui-widget-content">
        <p>scroll: true</p>
    </div>
    <div style="clear: both;"></div>
</div>

スポンサード リンク

カテゴリー: Draggable, GUI, JavaScript, jQuery, jQuery UI パーマリンク