Jquery: Drag - Drop and then get the new order based on the new position

JavaScript
1

Hello,
Ok I have the drag and drop thing working, and its doing what I expected it to. My question is after I move the box can I get the div id values based on the new order?
IE: If I drag a box to the top from the bottom, I want to get and store the new postion based on an array of div id’s

<script type=“text/javascript”>
$(function(){
$(“.box”).draggable();
});
</script>
<div id=“main”>
<div class=“box” id=box_1></div>
<div class=“box” id=box_2></div>
<div class=“box” id=box_5></div>
<div class=“box” id=box_6></div>
<div class=“box” id=box_3></div>
<div class=“box” id=box_4></div>
</div>

2

Draggable doesn’t change their ordering in the DOM tree, it just gives them a relative position instead, so it’s difficult to programmatically determine their relationship to each other.
You would want to also make use of droppable so that when they are dropped, you can more easily get their updated relationships with each other.

3

Well I went with sortable which works how I was hoping.


	$("#main").sortable({
		opacity: 0.6,
		update: function(event, ui) {
		    var info = $(this).sortable("serialize");
		    alert(info);
		}
	});
    $( "#main" ).disableSelection();

The problem is that I am building a widget type system, the widgets are variable widths and heights.

The dimensions are fixed sort of based on css classes ie:
.cols_1{width:200px;}
.cols_2{width:400px}

.rows_1{height:100px;}
.rows_2{height:200px}

I am sure you know actually sortng and aligning something like this is a pain in the butt if not impossible, any suggestions as to how I can fill in the blanks? I need to store the postion in a databse so the next time a user logs in it will be the same

4

When a sortable item is dropped, the DOM updates with the new position of the items. So if each item is uniquely identified, you can use something like this to retrieve the id’s


$('selector for items').toArray().map(function (el) {
    return el.id;
});

That will give you an array of id attributes that you can then use JSON.stringify() on and pass that info to the database.

5

I was using this function to get the array
var info = $(this).sortable(“serialize”);

but did you look at the image? I cant figure out how to get the divs to align next to each other. The box’s are dynamic based on user choice and the sizes are dynamic based on user choice. In the omage I am trying to get the blue and yellow box to float up to atleast the the bottom of the boxes above them

6

That sounds like a job for CSS, and potentially for advice from the css forum

7

I was worried you would say that, I already started gathering the relative position after switching back to draggable