search

ducksboard / gridster.js

gridster.js is a jQuery plugin that makes building intuitive draggable layouts from elements spanning multiple columns
http://gridster.net/
MIT License
6.04k stars 1.2k forks source link

Drag drop style customization #506

Closed mahitaande closed 9 years ago

mahitaande commented 9 years ago

Hi, I like how the drag drop is organised in gridster. I would like to know if the style for drag and drop can be customized. The style I am trying to achieve is

  1. the current new widget position style is a faded area. instead can I customize it to have something with dotted border
  2. When the widget is dropped, the widget flows into the new place, instead can it be customized to snap into the new place. E.g. http://datatorrent.github.io/malhar-angular-dashboard/#/

Thanks

bondt commented 9 years ago

Yes, you can do this very well even:

  1. The element being dragged gets the class dragging, so feel free to play around with that. The semi-transparent 'preview' of the widget's new position is class preview-holder, which can be customised as well.
  2. This is done by CSS3's transitions, which are in the stylesheet. Have a look at all rules with left .3s, top .3s, like this one:
.ready .gs-w:not(.preview-holder) {
    -webkit-transition: opacity .3s, left .3s, top .3s;
    -moz-transition: opacity .3s, left .3s, top .3s;
    -o-transition: opacity .3s, left .3s, top .3s;
    transition: opacity .3s, left .3s, top .3s;
}

When you remove left .3s, top .3s (without breaking the code), it'll snap in nicely.

bondt commented 9 years ago

You can also overwrite the styling fairly simple: http://jsfiddle.net/b0ndt/v7duxydd/ (this is cleaner than changing core files).

mahitaande commented 9 years ago

Thank you for the response. The suggested style change works beautifully.