Jquery tableau de bord avec Grille de Mise en page

Je suis à la recherche de construire un tableau de bord basé sur Jquery. En regardant les exemples suivants:

http://jqueryui.com/sortable/#display-grid

et

http://jqueryui.com/sortable/#portlets

Je vois que cette fonctionnalité est facile à faire si nous avons un design fluide. Cependant. Je veux un tableau de bord qui est un peu plus complexe que les exemples mentionnés ci-dessus.

Le tableau de bord je suis à la recherche pour créer aura
une grille où les articles peuvent être déposés sur. Les articles peuvent être déposés n'importe où sur la page, et l'espacement entre le droit d'exister entre les éléments.
Les éléments peuvent être redimensionnables contre la grille causant des objets pour les déplacer hors de la voie.

Je ne pas souhaitez une mise en page comme la page d'accueil de google de tableau de bord où les carreaux de changement et de ne pas laisser l'espacement entre eux dans la grille.

Ainsi, par exemple, j'aurais 10 x 10 grille (50 pixels par unité)

Une tuile peut être de 1 x 1 et redimensionné pour 1 x 2 et puis il y a peut être un 1 x 1 entretoise, puis une autre tuile.

Je suis à la recherche d'un bon algorithme pour effectuer cette opération. Mon but ultime est de se retrouver avec un tableau de bord similaire à ceux que vous voyez sur votre android écrans d'accueil.

Cependant, mon grand inconvénient est actuellement intelligent de détection de collision pour l'échange et de l'organisation de la grille.

Une fois accompli, je souhaite partager mon tableau de bord sur github. Merci.

Vous êtes à la recherche d'un plugin jQuery vous pouvez utiliser pour ce faire. Ou écrivez-en un vous-même à partir de zéro. Ou laisser quelqu'un ici écrire pour vos qui vous puis de publier sur GitHub? 🙂
Je suis à la recherche d'un plugin Jquery qui peut vous aider avec ceci si possible (si elle répond à mes besoins). Je vais probablement finir par écrire mon propre mais je suis à la recherche d'un bon algorithme de référence ou de la mise en œuvre de cette approche.
Les deux liens que vous avez fournies sont un très bon point de départ, vous pouvez lire le code de la comprendre et ensuite de le personnaliser en fonction de vos besoins.
Il semble que il ya un couple de UX questions à répondre en premier. Comment tuiles être redimensionnée? En faisant glisser les bords? Dire sur votre 10 x 10 de la grille, j'ai 100 tuiles (chaque 1x1). Qu'advient-il si je redimensionner la partie supérieure gauche de la tuile à 2x1? Si la tuile pour le droit de supprimer/supprimer/pousser les autres à travers? Je vais essayer de réfléchir à TOUS les UX possibilité de la première et de s'assurer que ce que vous êtes en imaginant serait utilisable. Désolé pour la non-réponse... à partir d'une mise en œuvre point de vue, vous êtes probablement puis, regardant munging jQuery UI Sortable et Redimensionnables avec une certaine logique personnalisée pour gérer les UX de redimensionnement.
Apparemment, le Droptiles projet pourrait vous donner un bon point de départ. Les tuiles ne sont pas redimensionnables, mais ils peuvent avoir des tailles différentes.

OriginalL'auteur Elixir | 2012-12-05

  1. 11

    Ce n'est pas un plugin jQuery, mais Gridster fait tout ce que vous avez mentionnées, SAUF pour le redimensionnement.

    S'il vous plaît laissez-nous savoir si vous trouvez quelque chose de plus complet.

    Gridster est un bon début. Mais en fait, il n'est pas accomplir de la manière la j'attends. Certainement upvoting. La grille de mise en page ne permet pas d'éléments à la verticale, vide de la colonne de lignes entre deux widgets ainsi que de ne pas permettre le redimensionnement.
    Jetez un oeil à ksylvest.github.io/jquery-gridly
    Petite info de mise à jour: Gridster est un plugin jQuery avec carrelage au redimensionnement de soutien, etc. (au moins, maintenant, et que je peux le voir dans les démos que j'ai essayé jusqu'à présent). Même si l'info a été un peu dépassé, il m'a aidé pointant vers ce joli petit plugin. Merci @rowanu 😉

    OriginalL'auteur rowanu