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

Question

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.

@DrunkWolf : I wish i could show a full demo but i cant. However i have made a small demo of it. First watch this https://jsfiddle.net/or6m2v4z/1/ Here You cant sort item 3. Now watch this . https://jsfiddle.net/6883L2gq/1/ here it works but on first attempt it just rearranges . Please read my above question and see both demos — Amar Singh, Oct 06 '15 at 07:51
So basically what you want is to reorder the div so the post-drop order is maintained without using float or left/right when you start sorting inside the div? — DrunkWolf, Oct 06 '15 at 10:20
@DrunkWolf : wow,,,exactly sir !! i must say you are very smart ..seriously..yea thats wat i want !! — Amar Singh, Oct 06 '15 at 10:32

score 1 · Accepted Answer · edited May 23 '17 at 11:59

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 );

edited May 23 '17 at 11:59

Community

1
1

answered Oct 06 '15 at 10:47

DrunkWolf

994
1
6
18

ok this looks something cool . i will just go through it properly and will let you know. can you just tell me will this work for me if i am using positioning like left:10px right:0px ..instead of float values. – Amar Singh Oct 06 '15 at 10:55
@YoYo Yes it will work, it will look at the actual position of the elements on the page, not at any css properties. (Altough you might want to add left:"",right:"" inside the $(this).css() to remove this markup after getting the right values) – DrunkWolf Oct 06 '15 at 10:57
@YoYo as a note, it will fail if you the divs are on more then one row, but im not sure that's an issue in your case. In this case you will need to keep track of the offset().top as well, and sort based on these 2 variables instead. – DrunkWolf Oct 06 '15 at 11:03
@YoYo i added a fiddle with the solution for multiple lines btw, in case you needed that :P, there's 2 divs with the same items in there, to show you that the order is actually correct from how it was before – DrunkWolf Oct 07 '15 at 08:47
Hi howz you ... I am facing a problem in this . As you know I have applied float left to all child divs so that I can do sorting but in some cases the last div comes out of the container . wat to do now ? – Amar Singh Oct 27 '15 at 07:17
Hi howz you ... I am facing a problem in this . As you know I have applied float left to all child divs so that I can do sorting but in some cases the last div comes out of the container . wat to do now ? – Amar Singh Oct 27 '15 at 07:18
@YoYo I would really need to know -which- cases – DrunkWolf Oct 27 '15 at 15:19
Sorry i solved that problem .. If you remember my question.. dropping a div close to right side of container appends that draggable div to right .. using DOM position .. than for sorting as you had told to loop and sort div according to offset value ... and give float left to all child divs,,,,, worked like charm !!! now a question is I have a redo undo and delete for each step ... if i undo of divs added ... than as it is float left . on undoing all divs falls to left .... but that shudnt happen .. on undo..all divs shud come to undo according to DOM positions...did you get me ?? – Amar Singh Nov 07 '15 at 07:29

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

1 Answers1