允許 Gridstack 僅可拖動到項目的特定區域

Question

我正在使用 Gridstack js 為儀表板創建可拖動/可調整大小的小部件。 圖片顯示了一個示例小部件。 我保留了默認的可拖動值，我可以通過雙擊小部件內的任意位置來拖動它。 我想要做的是僅通過單擊灰色區域使小部件可拖動。 是否應該為此覆蓋默認的可拖動值？ 如果是這樣怎么辦？ 我是 jquery/js 的新手，在 inte.net 上找不到任何類似的東西。

Answer 1

假設您正在使用gridstack默認的jQueryUI的draggable，您可以在您想要不可拖動的任何元素上使用cancel選項重新設置可拖動構造函數。 在下面的代碼中，將not-draggable類添加到網格堆棧項內的任何div將禁止拖動。

$('.grid-stack-item').draggable({cancel: "div.not-draggable" });

Answer 2

當前答案已過時。 在 2023 年執行此操作的方法是在初始化GridStack時使用draggable選項。

GridStack.init({
        draggable: {
            handle: '.drag-target'
        },
    });

drag-target應該是您希望 window 可從中拖動的位置的 class 名稱。

與您的圖像略有不同，但如果您有類似以下內容，您將能夠單擊並拖動灰色部分，但粉紅色部分不可拖動。

 .outer { border: solid black 2px; }.header { background: grey; height: 20px; }.content { background: pink; height: 80px; }

 <div class="outer"> <div class="header drag-target"> </div> <div class="content"></div> </div>