Autoriser Gridstack uniquement sur une zone spécifique de l'élément

Question

J'utilise Gridstack js pour créer des widgets déplaçables/redimensionnables pour un tableau de bord. L'image montre un exemple de widget. J'ai gardé les valeurs draggable par défaut telles quelles et je peux les faire glisser en double-cliquant n'importe où dans le widget. Ce que je veux faire est de rendre le widget glisser uniquement en cliquant sur la zone grise. Les valeurs draggable par défaut doivent-elles être remplacées pour cela? Si c'est le cas, comment? Je suis assez nouveau à jquery/js, et je n'ai rien trouvé de similaire sur internet.

Answer 1

En supposant que vous utilisez par défaut de gridstack de draggable de jQueryUI, vous pouvez re-définir le constructeur draggable avec l'option d'annulation sur les éléments que vous souhaitez ne pas être draggable. Dans le code ci-dessous, l'ajout de la classe not-draggable tout div à l'intérieur de l'élément de la pile de grille aura son glissement supprimé.

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