Question

After fighting and fightings with this problem, I have no choice but ask for help! My situation is this: I have a number of absolutely positioned elements. Each of these elements has its own attributes “top” and “left“. The HUGE problem I’m having with this is when I try to sort the items.

$(".container").sortable({
    containment: ".container",
    cursor: 'move',
    items: '.element',
    helper: 'clone',
    placeholder: 'new-placeholder',
    forcePlaceholderSize: true,
    tolerance: 'pointer',
    revert: true,
    scroll: false,
    start: function(event, ui) {
        event.stopPropagation();
        $(".new-placeholder").css("left", ui.helper.position().left);
        $(".new-placeholder").css("top", ui.helper.position().top);
        $(".new-placeholder").css("height", ui.helper.height());
        $(".new-placeholder").css("width", ui.helper.width());
    },
    change: function(event, ui) {
        console.log("Placeholder index: " + ui.placeholder.index());
    }
}).disableSelection();

This is the Current Behavior and this is the Expected behavior

As you can see, the elements should change their position when the dragged element is on over. Is there any better way to do this? I can’t get rid of the absolute positions, that’s the mainly issue. I know the solution have to be on the change, update and stop methods, but I can’t figure this out by myself.

So far, all I got was to get the new index of the placeholder when the item is being dragged over another element but ¿how can I change the position of the placeholder and sort the rest of the elements according to that?

Answer 1

It would be impractical to reproduce all the elements, but the basic idea for my own update (to get it to work) was this:

1. Remove all absolute positioning from the container and the “portlets”

2. Each sortable container is floated left, is relatively positioned, and has a bottom padding. This padding means that even empty containers can be targeted

3. Each “portlet” within the container has width set to 100% and is also floated left with relative positioning and a bottom margin (to space them out).

4. Used the “start” parameter to set my placeholder sizes dynamically. I restrict placeholder size to 350px tall, but for any widgets smaller than that, the placeholder will equal the portlet size.

5. Used the “connectWith” parameter to link containers.

Basic HTML:

<div class="portletContainer"> <!-- floated left, has padding -->

  <div class="portlet"> <!-- floated left, margin-bottom, 100% width -->
    <div> some stuff </div>
  </div>

  <div class="portlet"> <!-- floated left, margin-bottom, 100% width -->
    <div> some more stuff </div>
  </div>

</div>

<div class="portletContainer">
  <!-- repeat the above pattern; the two containers are then linked -->
</div>

Basic Sortable JavaScript:

$('.portletContainer').sortable({
  connectWith: ".portletContainer",
  start: function(e, ui) {
    var elementHeight = ui.item.height();
    if(elementHeight < 350) {
      ui.placeholder.height(elementHeight);
    }
  }
}); 

If that’s still not working for you, something has likely just been overlooked. Either something is inheriting absolute positioning or JavaScript is adding it.

I think that covers all the bases, but the even shorter version is: I stripped it back until my markup and CSS was analogous to the markup and CSS in the “portlet” sample in the jQuery UI Sortable Demo page.