Sorting of DOM elements which have fixed position values (for eg: left:20px)

283
November 21, 2016, at 5:35 PM

Hi to all experts over here My question is all about jquery. I am using draggable dropabble methods.I have a droppable div(parent) . And on drag and drop of a element (which is a div itself) to left of droppable div (parent div) , elements gets appended to left ...if dropped close to right it appends to right.

For this I am using left right positioning (for eg:left:30px , right:40px). I hv used float right left too.

Upto here its working perfectly.

Now I want to implement sorting too...I mean the elements within the droppable container (parent div) should sort too. For which I have used ui.sortable . But its not working since the DOM elements have a fixed position so it does not sort.

Now I am tried changing the css of DOM elements on first attempt to sort

 $( ".parent" ).sortable({
        placeholder: "highlight",
        stop:function(event,ui){
        $(".parent").children("div").css("float","left");
        $(".parent").children("div").css("position","relative");
        $(".parent").children("div").css("right","");
        $(".parent").children("div").css("left","");
        }  });

The Above code does not sort in the first attempt but rearranges the DOM elements according to the DOM position as in code .After the First attempt it changes the css and it sorts perfectly. I want sorting on first attempt itself without rearranging of child divs

Notice: sortable is not working since i have given the dom positions..or float values....

I wish I could show a full demo but i cant. However i have made a small demo of it. First watch this This Here You cant sort item 3 with others. Now watch this . Click here it works but on first attempt it just rearranges and after that it works perfectly.Simillar to my question. Please read my above question and see both demos

Please tell me if anyone knows a solution.

Answer 1

Ok, so i edited your fiddle here a bit to reorder the div so the sorting works. Basically, there's 2 steps:

$('#sortable li').each(function(index){
    $(this).attr('data-orgleft',$(this).offset().left);
    $(this).css({float:"left",position:"relative"});
});

Go through all list elements, see where they are on the page, and asign their position to an attribute (could use .data() here as well, but would be less visible in dom). While doing this, we also remove 'float' and set position to relative.

var $wrapper = $('#sortable');
$wrapper.find('li').sort(function (a, b) {
    return +a.dataset.orgleft - +b.dataset.orgleft;
})
.appendTo( $wrapper );

Then we sort the div based on this data attribute, as shown here in a different question. This makes it so you can just use sortable as normal from the start. (In your application, you would need to put this in a function and call it every time you drop in a div)

Just in case your draggables will extend over multiple lines, the way to reorder them would be as in here, basically it sorts over both top and left.

$wrapper.find('li').sort(function(a,b){
    var x = a.dataset.orgtop - b.dataset.orgtop;
    return x == 0? a.dataset.orgleft - +b.dataset.orgleft : x;
}).appendTo( $wrapper );
READ ALSO
Using Ajax to see if email already exists in database

Using Ajax to see if email already exists in database

I have a form where a thank you message displays after you have submitted it, however, I want it to alert "invalid email" if the email you have submitted already exists in the database. .

368
Bootstrap form validation and submit using bootstrap validator

Bootstrap form validation and submit using bootstrap validator

I am using bootstrap popup modal form in my website as contact form. I did form validation using bootstrap form validation.

445
Toggle Functionality requires two clicks

Toggle Functionality requires two clicks

I am implementing a menu that will appear on scroll. It has two <li> elements and toggle functionality.

265