hey guys
i made a script inspired by wordpress widgets'page to drag&drop blocks of my sites
but problem is in saving the position after droping
this is
jquery code , i used to do the above target :
<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('updatePanels.php', 'data='+$.toJSON(sortorder), function(response){
if(response=="success")
$("#console").html('<div class="success">Saved</div>').hide().fadeIn(1000);
setTimeout(function(){
$('#console').fadeOut(1000);
}, 2000);
});
}
</script>
and a simple php
file
but problem is its not sending data to target php
file
is there anything wrong with my code ?
