jquery drag and drop script and problem in reading json array
- by Mac Taylor
i made a script , exactly like wordpress widgets page and u can drag and drop objects
this is my jquery script :
<script type="text/javascript" >$(function(){
$('.widget')
.each(function(){
$(this).hover(function(){
$(this).find('h4').addClass('collapse');
}, function(){
$(this).find('h4').removeClass('collapse');
})
.find('h4').hover(function(){
$(this).find('.in-widget-title').css('visibility', 'visible');
}, function(){
$(this).find('.in-widget-title').css('visibility', 'hidden');
})
.click(function(){
$(this).siblings('.widget-inside').toggle();
//Save state on change of collapse state of panel
updateWidgetData();
})
.end()
.find('.in-widget-title').css('visibility', 'hidden');
});
$('.column').sortable({
connectWith: '.column',
handle: 'h4',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
start: function(event, ui){
//Firefox, Safari/Chrome fire click event after drag is complete, fix for that
if($.browser.mozilla || $.browser.safari)
$(ui.item).find('.widget-inside').toggle();
},
stop: function(event, ui){
ui.item.css({'top':'0','left':'0'}); //Opera fix
if(!$.browser.mozilla && !$.browser.safari)
updateWidgetData();
}
})
.disableSelection();
});
function updateWidgetData(){
var items=[];
$('.column').each(function(){
var columnId=$(this).attr('id');
$('.widget', this).each(function(i){
var collapsed=0;
if($(this).find('.widget-inside').css('display')=="none")
collapsed=1;
//Create Item object for current panel
var item={
id: $(this).attr('id'),
collapsed: collapsed,
order : i,
column: columnId
};
//Push item object into items array
items.push(item);
});
});
//Assign items array to sortorder JSON variable
var sortorder={ items: items };
//Pass sortorder variable to server using ajax to save state
$.post("blocks.php"+"&order="+$.toJSON(sortorder), function(data){
$('#console').html(data).fadeIn("slow");
});
}
</script>
main part is saving object orders in table and this is my php part :
function stripslashes_deep($value) {
$value = is_array($value) ? array_map('stripslashes_deep', $value) :
stripslashes($value);
return $value; }
$order = $_GET['order'];
$order = sql_quote($order);
if(empty($order)){
echo "Invalid data";
exit;
}
global $db,$prefix;
if (get_magic_quotes_gpc()) {
$_POST = array_map('stripslashes_deep', $_POST);
$_GET = array_map('stripslashes_deep', $_GET);
$_COOKIE = array_map('stripslashes_deep', $_COOKIE);
$_REQUEST = array_map('stripslashes_deep', $_REQUEST);
}
$data=json_decode($order);
foreach($newdata->items as $item)
{
//Extract column number for panel
$col_id=preg_replace('/[^\d\s]/', '', $item->column);
//Extract id of the panel
$widget_id=preg_replace('/[^\d\s]/', '', $item->id);
$sql="UPDATE blocks_tbl SET bposition='$col_id', weight='".$item->order."' WHERE id='".$widget_id."'";
mysql_query($sql) or die('Error updating widget DB');
}
print_r($order);
now forexample the output is this :
items\":[{\"id\":\"item26\",\"collapsed\":1,\"order\":0,\"column\":\"c\"},{\"id\":\"item0\",\"collapsed\":1,\"order\":0,\"column\":\"i\"},{\"id\":\"item0\",\"collapsed\":1,\"order\":1,\"column\":\"i\"},{\"id\":\"item1\",\"collapsed\":1,\"order\":2,\"column\":\"i\"},{\"id\":\"item3\",\"collapsed\":1,\"order\":3,\"column\":\"i\"},{\"id\":\"item16\",\"collapsed\":1,\"order\":4,\"column\":\"i\"},{\"id\":\"item0\",\"collapsed\":1,\"order\":5,\"column\":\"i\"},{\"id\":\"item6\",\"collapsed\":1,\"order\":6,\"column\":\"i\"},{\"id\":\"item17\",\"collapsed\":1,\"order\":7,\"column\":\"i\"},{\"id\":\"item19\",\"collapsed\":1,\"order\":8,\"column\":\"i\"},{\"id\":\"item10\",\"collapsed\":1,\"order\":9,\"column\":\"i\"},{\"id\":\"item11\",\"collapsed\":1,\"order\":10,\"column\":\"i\"},{\"id\":\"item0\",\"collapsed\":1,\"order\":0,\"column\":\"l\"},{\"id\":\"item5\",\"collapsed\":1,\"order\":1,\"column\":\"l\"},{\"id\":\"item8\",\"collapsed\":1,\"order\":2,\"column\":\"l\"},{\"id\":\"item13\",\"collapsed\":1,\"order\":3,\"column\":\"l\"},{\"id\":\"item21\",\"collapsed\":1,\"order\":4,\"column\":\"l\"},{\"id\":\"item28\",\"collapsed\":1,\"order\":5,\"column\":\"l\"},{\"id\":\"item7\",\"collapsed\":1,\"order\":0,\"column\":\"r\"},{\"id\":\"item20\",\"collapsed\":1,\"order\":1,\"column\":\"r\"},{\"id\":\"item15\",\"collapsed\":1,\"order\":2,\"column\":\"r\"},{\"id\":\"item18\",\"collapsed\":1,\"order\":3,\"column\":\"r\"},{\"id\":\"item14\",\"collapsed\":1,\"order\":4,\"column\":\"r\"}]}
question is how can i find out column_id or order
im a little bit confused
