web-dev-qa-db-ja.com

jquery draggable：ドラッグ可能な領域を制限する方法は？

ドラッグ可能なオブジェクト（div）と、ドロップ可能なオブジェクト（table TD）があります。ユーザーにドラッグ可能なオブジェクトをドロップ可能なTDのいずれかにドラッグしてもらいたい。

この方法でドラッグ可能およびドロップ可能を有効にします。

$(".draggable").draggable();
$(".droppable").droppable();

問題は、これにより、ユーザーがドロップ可能な領域の外を含め、画面上の任意の場所にdivをドラッグできることです。

ドラッグ可能なオブジェクトの境界領域を制限するにはどうすればよいですか？

jquerydraggable
53
xus

「封じ込め」オプションを使用します。

jQuery UI API-ドラッグ可能なウィジェット-包含

ドキュメントには、値のみを受け入れると書かれています：'parent'、'document'、'window'、[x1, y1, x2, y2]しかし、「＃container」などのセレクターも受け入れることを覚えているようです。

94
Mattyod
$(function() { $( "#draggable" ).draggable({ containment: "window" }); });

このコードは表示されません。完全なコードとデモ： http://www.limitsizbilgi.com/div-tasima-surukle-birak-div-drag-and-drop-jquery.html

親内の要素を制限するには：

$( "#draggable" ).draggable({ containment: "window" });
14
Limitless isa

以下にコード例を示します。 #thumbnailは#handle DIVのDIV親です

buildDraggable = function() {
    $( "#handle" ).draggable({
    containment: '#thumbnail',
    drag: function(event) {
        var top = $(this).position().top;
        var left = $(this).position().left;

        ICZoom.panImage(top, left);
    },
});
9
mbokil
$(function () {
    $( ".droppable-area" ).sortable({
                connectWith: ".connected-sortable",
                containment: ".droppable-area", //(parent div)
                stack: '.connected-sortable div'
            }).disableSelection();
});
0
Rahul Ratnam

containment option の公式ドキュメントからの抜粋を参照してください：

封じ込め

デフォルト：false

指定された要素または領域の境界内へのドラッグを制限します。
サポートされる複数のタイプ：

  • Selector：ドラッグ可能な要素は、セレクタによって検出された最初の要素の境界ボックスに含まれます。要素が見つからない場合、包含は設定されません。
  • Element：ドラッグ可能な要素は、この要素の境界ボックスに含まれます。
  • 文字列：設定可能な値："parent"、"document"、"window"。
  • Array：[ x1, y1, x2, y2 ]の形式で境界ボックスを定義する配列。

コード例：
containmentオプションを指定してドラッグ可能を初期化します。

$( ".selector" ).draggable({
    containment: "parent" 
});

初期化後、containmentオプションを取得または設定します。

// Getter
var containment = $( ".selector" ).draggable( "option", "containment" );
// Setter
$( ".selector" ).draggable( "option", "containment", "parent" );
0
naXa