jquery drag and drop script and problem in reading json array
Posted
by Mac Taylor
on Stack Overflow
See other posts from Stack Overflow
or by Mac Taylor
Published on 2010-04-25T13:44:22Z
Indexed on
2010/04/25
13:53 UTC
Read the original article
Hit count: 213
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
© Stack Overflow or respective owner