Sortable Div's UI Not Working Correct

[wolfgang1983]

I am working on sortable divs with bootstrap On my script I can only put in one col- size at a time. As shown on my codepen example.

I would like to know if there is away on my javascript so the I do not have to enter the the column sizes but detects the column size instead.

Any Suggestions

http://codepen.io/riwakawebsitedesigns/pen/aOYOBp/

[Alen]

@riwakawd

You have to dynamically determine the layout. Here’s a quick example.

http://codepen.io/alenabdula/pen/PqRPgG

$rows = $('.row');
$rows.each(function(index, el) {
  $itemClass = $(this).find('.col').attr('class');
  $layout = $itemClass.slice(-1);
  $self = $(this);
  $self.sortable({
    placeholder: 'col-md-' + $layout + ' placeholder',
    helper: 'clone',
    appendTo: document.body,
    opacity: 0.7,
    start: function(event, ui) {
      var $definedStyles = {
        height: ui.item.height() + 60 + 'px',
        padding: '2rem',
        border: '3px dotted #999',
        backgroundColor: '#ccc',
      };
      ui.placeholder.css($definedStyles);
      ui.item.addClass('item-dragging');
    },
    stop: function(event, ui) {
      ui.item.removeClass('item-dragging');
    },
  });
});

Hope that helps get you in the right direction.
Best, Alen.

[wolfgang1983]

@Alen. When I refresh my page they go back to old position is there any way to keep them in there new position after page refresh etc.

[Alen]

@riwakawd you can’t unless you implement some kind of persistence layer. Once you refresh the page HTML/JS/CSS re-renders the page so your state is gone. You need to save it somehow, either in a database, cookie, application cache, service worker, etc…

So the general process would be:

1. On initial load, user requests the page, you display default sorting
2. User sorts the items, you save those changes back to the persistence layer.
3. Next time user requests the page, you would load the custom sorting from the persistence layer

[Author]

Posts