Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Sortable Div's UI Not Working Correct Reply To: Sortable Div's UI Not Working Correct

#204600
Alen
Participant

@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.