search

hootsuite / grid

Drag and drop library for two-dimensional, resizable and responsive lists
http://hootsuite.github.io/grid/
Apache License 2.0
3.57k stars 279 forks source link

Can jQuery be removed? #110

Open vytautas-pranskunas- opened 7 years ago

vytautas-pranskunas- commented 7 years ago

Hello,

I am using Angular 2.x and was looking for some dashboard library. This one looks very promising but as you know jQuery is not recommended by most MVVM libraries so I wonder is there a chance that jQuery can be removed and swapped with regular document... events?

catalin-miron-hs commented 7 years ago

Hi @vytautas-pranskunas-,

You can use Gridlist without jQuery but you'll need to write an additional wrapper for gridlist.js in Angular to translate the matrix into DOM. gridlist.js is the grid manager (algorithm itself) and jquery.gridlist.js is translating the gridlist.js output into DOM.

Please let me know if you need other informations and if there's anything that we can do in order to help you out.

vytautas-pranskunas- commented 7 years ago

Hi, thanks for your answer. I think your library does a great job but it's limitation for spreading is jQuery. If you can translate write to jQuery agnostic wrapper I think it will be used in much more projects utilizing React, Angular x and other UI libraries, because, I am sure you aware, that for thos elibraries jQuery is not recommended at all, and I am sure that you can write that wrapper faster than anybody else :)

Let me know if you going to do this.

catalin-miron-hs commented 7 years ago

gridlist does not require jQuery and is framework agnostic. From README:

  1. An agnostic GridList class that manages the two-dimensional positions from a list of items within a virtual matrix.
  2. A jQuery plugin built on top of the GridList class that translates the generic items positions into responsive DOM elements with drag and drop capabilities.
catalin-miron-hs commented 7 years ago

You still need to have logic for drag and drop capabilities

vytautas-pranskunas- commented 7 years ago

"gridlist does not require jQuery and is framework agnostic. From README:"

I know.

"A jQuery plugin built on top of the GridList class that translates the generic items positions into responsive DOM elements with drag and drop capabilities." - this is what should be jQuery agnostic

Drag'n'Drop can be done with RxJs for instance and i think it would be more convenient to have this. And it is quite easy - first link from google:

https://gist.github.com/mattpodwysocki/2156153

but there can be even simpler implementations. Idea is simple - you bind to element mouseEnter, taking mouseMove events while mouseLeave and change elements position.

All other element positions can be easily changed with document.getElement.....

joacim-boive commented 7 years ago

Hear, hear - I also would like to see a jQuery free version.

kristina-albrecht commented 6 years ago

Would love to be able to use this library with Angular 2+. Unfortunately I have no idea how to do this without using jQuery and having to re-implement half of the library. Looking forward to seeing more React and Angular friendly version!