My Personal Blog's
Collapsible Drag & Drop Panels like WordPress Dashboard using Jquery and ASP.NET
I found a great article that teach us how to create drag and drop panel like dashboard in wordpress panel.
In this sites: http://webdeveloperplus.com/jquery/saving-state-for-collapsible-drag-drop-panels/ shows us how to create the drag and drop panel and save the state in PHP and mysql. In this article, I will show the code in ASP.NET using SQL Server 2005.
First, download jquery at http://jquery.com/
Second, create a testing table name it: widgets
CREATE TABLE [dbo].[widgets]( [id] [int] IDENTITY(1,1) NOT NULL, [column_id] [int] NULL, [sort_no] [int] NULL, [collapsed] [int] NULL, [title] [varchar](100) NULL )
- id stores the id of panel.
- column_id is the column number to which panel belongs.
- sort_no is the order of panel within column.
- collapsed stores information about whether the panel is collapsed or not.
- title is the title of the widget.
Insert data to widgets as screenshot below:
In ASP.NET Project, create xsd file to retrieve and insert data to widgets table and name it as ds_widget.xsd :
In widgetsDetailTableAdapter, use below query:
SELECT * FROM widgets WHERE column_id=@column_id ORDER BY sort_no
for UpdateQuery, use below query:
update widgets set column_id = @column_id, sort_no = @sort_no, collapsed = @collapsed
where id = @widgetid
Create new webpage, add these code
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Import Namespace="System.Data" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.11.custom.min.js"></script>
<link href="dashboard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
$('.dragbox')
.each(function() {
$(this).hover(function() {
$(this).find('h2').addClass('collapse');
}, function() {
$(this).find('h2').removeClass('collapse');
})
.find('h2').hover(function() {
$(this).find('.configure').css('visibility', 'visible');
}, function() {
$(this).find('.configure').css('visibility', 'hidden');
})
.click(function() {
$(this).siblings('.dragbox-content').toggle();
//Save state on change of collapse state of panel
updateWidgetData();
})
.end()
.find('.configure').css('visibility', 'hidden');
});
$('.column').sortable({
connectWith: '.column',
handle: 'h2',
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('.dragbox-content').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');
$('.dragbox', this).each(function(i) {
var collapsed = 0;
if ($(this).find('.dragbox-content').css('display') == "none")
collapsed = 1;
$.post('widgetUpdate.aspx', 'id=' + $(this).attr('id') +
'&collapsed=' + collapsed + '&order=' + i + '&column=' + columnId, function(response) {
if (response == "success")
$("#console").html('<div class="success">Saved</div>').hide().fadeIn(1000);
setTimeout(function() {
$('#console').fadeOut(1000);
}, 2000);
});
});
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<%
Response.Write("<uc1:subTitle ID=subTitle2 runat=server />")
'Must set the column manually
For i As Integer = 1 To 2
Response.Write("<div class=column id=column" & i & ">")
Dim ds2 As ds_widgetTableAdapters.widgetsDetailTableAdapter = New ds_widgetTableAdapters.widgetsDetailTableAdapter
Dim dt2 As New DataTable
Try
dt2 = ds2.GetData(i)
For a As Integer = 0 To dt2.Rows.Count - 1
Response.Write("<div class=dragbox id=item" & dt2.Rows(a)("id") & ">")
Response.Write("<h2>" & dt2.Rows(a)("title") & "</h2>")
Response.Write("<div class=dragbox-content " & IIf(dt2.Rows(a)("collapsed") = 1, "style=display:none;>", ">"))
Response.Write("TESTIS")
Response.Write("</div>")
Response.Write("</div>")
Next
Catch ex As Exception
End Try
Response.Write("</div>")
Next
%>
</form>
</body>
</html>
Explanation:
In above code, we use post method that we call from widgetUpdate.aspx to save the state panel into database.
Here is the code for widgetUpdate.aspx (back Code using VB.NET)
Partial Public Class widgetUpdate
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim id As String = Request.Form("id")
Dim collapsed As String = Request.Form("collapsed")
Dim order As String = Request.Form("order")
Dim column As String = Request.Form("column")
Try
'Dim products As List(Of widgets) = js.DeserializeObject(Request.Form("dataItem"))
Dim qa As ds_widgetTableAdapters.QueriesTableAdapter = New ds_widgetTableAdapters.QueriesTableAdapter
qa.UpdateQuery(extractNumber(column), order, collapsed, extractNumber(id))
Catch ex As Exception
End Try
End Sub
Function extractNumber(ByVal expression As String) As Integer
Dim re As New Regex("[0-9]")
Dim m As Match = re.Match(expression)
Return m.Value
End Function
End Class
The code is quite simple, we just get all the parameter that was sent from the main page, and save it to database based on the data that we received.
Extract Number function is used to get the number for the id and column no from the string.
For CSS CODE:
.column{
width:49%;
margin-right:.5%;
min-height:300px;
background:#fff;
float:left;
}
.column .dragbox{
margin:5px 2px 20px;
background:#fff;
position:relative;
border:1px solid #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.column .dragbox h2{
margin:0;
font-size:12px;
padding:5px;
background:#f0f0f0;
color:#000;
border-bottom:1px solid #eee;
font-family:Verdana;
cursor:move;
}
.dragbox-content{
background:#fff;
min-height:100px; margin:5px;
font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column .placeholder{
background: #f0f0f0;
border:1px dashed #ddd;
}
.dragbox h2.collapse{
background:#f0f0f0 url('images/collapse.png') no-repeat top right;
}
.dragbox h2 .configure{
font-size:11px; font-weight:normal;
margin-right:30px; float:right;
}
A simpler collapsible drag & drop without can be read at:
http://webdeveloperplus.com/jquery/collpasible-drag-drop-panels/
Download Sourcecode:
http://www.mediafire.com/?0b0i6jd0p1kszb4
