Sortable Multiple connectWith Problem
How to convert this into Jquery.
---------------
Handler.add(window, "load", init);
function init() {
var updating = false;
Draglist.add(document.getElementById("col1"), 'g1');
Draglist.add(document.getElementById("col2"), 'g1');
Draglist.add(document.getElementById("col3"), 'g1');
Draglist.addDropFunc("g1", updateOrder);
function updateOrder(group)
{
if(updating) return;
else updating = true;
var data = { };
data["order"] = Draglist.serData(group);
data["ajax"] = true;
HTTP.post(location, data, handleResult);
function handleResult(res)
{
updating = false;
}
}
function toggleDragging(on)
{
var list = document.getElementsByTagName("ul");
for(var i = 0; i < list.length; i++)
{
if(CSSClass.is(list[i], "elements"))
{
if(on)
{
CSSClass.add(list[i], "dragging");
}
else
{
CSSClass.remove(list[i], "dragging");
}
}
}
}
}
-----------------
I tried it with sortable, but the problem is, that 2 updates are made
instead one with all data.
Somebody got an idea how to change that ? Thanks alot.
-----------------
$(document).ready(function() {
$("#col1").sortable({
items: "li",
placeholder: "empty",
forcePlaceholderSize: true,
tolerance: 'intersect',
connectWith: ["#col2", "#col3"],
update: function(element, ui) {
$.post("index.php", { ajax: true, order1: $
(this).sortable("serialize") } );
},
});
$("#col2").sortable({
items: "li",
placeholder: "empty",
forcePlaceholderSize: true,
tolerance: 'intersect',
connectWith: ["#col1", "#col3"],
update: function(element, ui) {
$.post("index.php", { ajax: true, order2: $
(this).sortable("serialize") } );
}
});
$("#col3").sortable({
items: "li",
placeholder: "empty",
forcePlaceholderSize: true,
tolerance: 'intersect',
connectWith: ["#col1", "#col2"],
update: function(element, ui) {
$.post("index.php", { ajax: true, order3: $
(this).sortable("serialize") } );
}
});
});
-----------------