CODEWITHSUNDEEP
jqueryhtmlcssjquery-uijquery-ui-sortable
Alexandru Severin
Alexandru Severin

Reputation: 6218

Sortable list elements glitches for complex css lists

I'm trying to implement a sortable feature on a html nested list using jquery Sortable Plugin. Based on its tutorial.

It works good for simple lists with no css, but it glitches if I apply some styles. And by glitch I mean the animation flies away from the cursor.

My tree:

<ul class="simple">
    <li>Item 1</li>
    <li>Item 2
        <ul><li>Item 2.1</li></ul>
    </li>
</ul>

JS:

var oldContainer;
$(".simple").sortable({
  group: 'nested',
  afterMove: function (placeholder, container) {
    if(oldContainer != container){
      if(oldContainer)
        oldContainer.el.removeClass("active");
      container.el.addClass("active");
      oldContainer = container;
    }
  },
  onDrop: function (item, container, _super) {
    container.el.removeClass("active");
    _super(item);
  }
});

I can't post the css as it is too big. Here's a JsFiddle.

I can't tell if its due to my coding or if the plugin wasn't designed to be used this way. My question is, how can I fix the animation? or what other plugin should I use?

Upvotes: 0

Views: 147

Answers (1)

Danijel
Danijel

Reputation: 12689

The problem is in relative positioned list items, it seems that the plugin has problems to calculate left and top position if list items are relative, so it returns position relative to the first non static positioned parent. On the other hand, removing the position property will lead to problems with :before and :after pseudo elements because of the absolute positioning, since pseudo content is inserted inside a containing element.

Here is an example that roughly works with default static positioning. I hope it will serve the purpose.

Upvotes: 1

Related Questions