Question

I’ve been struggling with jQuery’s sortable. I originally tried following Nettuts tutorial on sortable but found the column method of dashboard layout too constricting. I wanted to have double wide widgets for graphs, etc… So I have a fixed width parent widget div and don’t use columns. The fixed width can fit 2 regular widgets, or 1 double wide widget. The widgets just wrap around nicely within the container and I want to just sortable the order the widgets are in.

The problem I’m having is sortable behaviour. I can drag and sort widgets, but the placeholder isn’t in the correct location when the click and drag happens. If I grab the bottom widget handle and move it, the placeholder appears at the top and its the width of the widget container (#widgets) not as the widget itself. I can see with columns that the placeholder might get its width from the column, but in my case even the left/top position isn’t correct. The placeholder is right at the top of the widget container.

Plus the animation always moves the widget to the top left of the widget container. Like it thinks that insert point, or previous location was the top left, not where its getting inserted or the previous location.

I know I’m missing something here. I’ve tried changing where the sortable method is attached but it doesn’t change anything. Any help would be appreciated!

A chunk of the rendered HTML:

<div id="widgets" class="span9">
  <div class="widget span8">
    <div class="widget-head">
      <h4>Demo Activity 1</h4>
    </div>
    <div class="widget-content">
      <p>The content...</p>
    </div>
    <div class="widget-bottom"></div>
  </div>

  <div class="widget span4">
    <div class="widget-head">
      <h4>Demo Activity 2</h4>
    </div>
    <div class="widget-content">
      <p>The content...</p>
    </div>
    <div class="widget-bottom"></div>
  </div>

  <div class="widget span4">
    <div class="widget-head">
      <h4>Demo Activity 3</h4>
    </div>
    <div class="widget-content">
      <p>The content...</p>
    </div>
    <div class="widget-bottom"></div>
  </div>

</div>

Basic placeholder css so I can actually see it:

.widget-placeholder {
  border: 2px dashed #333;
}

A clip of the JS that sets up the sortable:

    $sortableItems = $('> div', '#widgets');

    $sortableItems.find('.widget-head').css({
        cursor: 'move'
    }).mousedown(function (e) {
        $sortableItems.css({width:''});
        $(this).parent().css({
            width: $(this).parent().width() + 'px'
        });
    }).mouseup(function () {
        if(!$(this).parent().hasClass('dragging')) {
            $(this).parent().css({width:''});
        } else {
            $('#widgets').sortable('disable');
        }
    });

    $('.widget').sortable({
        items: $sortableItems,
        connectWith: $('#widgets'),
        handle: '.widget-head',
        containment: $('#widgets'),
        revert: 300,
        delay: 100,
        opacity: 0.8,
        placeholder: 'widget-placeholder',
        containment: 'document',
        forcePlaceholderSize: true,
        start: function (e,ui) {
            $(ui.helper).addClass('dragging');
        },
        stop: function (e,ui) {
            $(ui.item).css({width:''}).removeClass('dragging');
            $('#widgets').sortable('enable');
        }
    });

Answer 1

Add float: left; to your placeholder class will place it under correct order in your sortable column.

.widget-placeholder {
    border: 2px dashed #333;
    float: left;
}