jQueryUI sortable boxes

[POG1]

I have used the jQuery UI's sortable boxes element but i cannot work out how to save the positions of the boxes, currently i have this JS which is used to initiate the boxes.

$(function() {

$(".leftColumn, .rightColumn").sortable({

containment: "window",

cursor: "crosshair",

connectWith: ".comumns"

}).disableSelection();

});

The documentation shows there is an update event with this but im not sure how exactly i can do this.

Link to jQueryUI documentation:

http://jqueryui.com/demos/sortable/#event-change

[Floydian]

Re: jQueryUI sortable boxes

Do you have a working example? I'm sure I can help, but it'd be a lot easier seeing the script in action.

[POG1]

Re: jQueryUI sortable boxes

pog1.co.uk/mc

click random login then click homepage.

[Floydian]

Re: jQueryUI sortable boxes

I made an example that might be helpful to you: http://www.steelbreeze.us/play_ground/o ... es/pg.html

Specifically, I've added in a "change" event handler to your code:

 

		$(function() {
	$(".leftColumn, .rightColumn").sortable({
		containment: "parent",
		cursor: "crosshair",

		// CHANGE EVENT STARTS HERE
		change: function(event, ui) {

			// CREATE DEBUG OUTPUT
			var output = document.createElement('p');
			document.body.appendChild(output);
			output.style.width = '600px';
			output.style.margin = '0 auto';
			for (var x in event) {
				output.innerHTML += event[x];
			}
			output.innerHTML += '
-----------------------------------------
';
			for (var y in ui) {
				output.innerHTML += ui[y];
				for (var z in y) {
					output.innerHTML += y[z];
				}
			}
			output.innerHTML += '
-----------------------------------------
';
			// END OF CREATE DEBUG OUTPUT
		}
		// END OF CHANGE EVENT

	}).disableSelection();
});

 

Hope that helps...