Sortable

   drag Here - EditPanel



Sort Static Content

Any Static HTML can be wrapped in a DTISortable. Add more than one DTISortable and content can be moved freely all over the page. Static content can be seperated into different sortable sections by wrapping each section in an ASP Panel object. Any asp controls inside the DTISortables will still have all of their respective events.

Tool Box

The tool box is displayed when the Admin Panel is in layout mode and it contains various items that can be added to any DTISortable on the page. Items can be dragged over and placed within a sortable.

List of Tool Box Items

Deleting Static Content

When used in conjunction with DTIAdminPanel any item in a DTISortable can be deleted and will show up in the Recycle Bin. Items from the Recycelbin can be restored retaining all of their original content.

Recycle Bin

Any item in a Sortable can be removed and placed into the Recycle Bin. These items can be moved in and out of the recycle bin at anytime retaining the same content as when they where deleted. The recycle bin is only displayed when the Admin Panel is in Layout Mode.


<%@ Register Assembly="Kurkulis" Namespace="DTISortable" TagPrefix="cc1" %>
HTML 
<cc1:DTISortable ID="Sortable1" runat="server" HandleText="drag Here">
	<h2>Lorem ipsum dolor</h2> 
	<p>Mauris diam nisl, tristique et, gravida sed, dapibus ac, nibh. Nunc mollis ipsum 
	sed nibh. Morbi pede. In sem et neque, lorem. Quisque sit amet purus non lectus porttitor 
	consequat. Integer cursus nibh non nunc. Nunc non felis dolor.</p> 
	<p><a href="#" class="link2">Read more…</a></p> 
	
	<asp:Panel ID="panel1" runat="server">
		<ul class="list1"> 
			<li><a href="#">Lorem ipsum dolor sit amet</a></li> 
			<li><a href="#">Etiam aliquam hendrerit ipsum</a></li> 
			<li><a href="#">Nunc sit amet mauris nec</a></li> 
			<li><a href="#">Quam volutpat consectetuer</a></li> 
			<li><a href="#">Veroeros sed aliquam dolor </a></li> 
		</ul>
	</asp:Panel>
	
	<h2>Tempus morbi integer</h2> 
	<img src="/images/homepage07.jpg" alt="" width="81" height="106" class="left" /> 
	<p>Mauris diam nisl, gravida sed, dapibus amet, nibh. Nunc mollis ipsum sed Morbi pede. 
	In sem et lorem neque lorem blandit.</p> 
	<p><a href="#" class="link1">Read more</a></p>
	<br style="clear:both" />
	
	<asp:Panel ID="Panel2" runat="server">
		 <asp:Button ID="btnCheck" runat="server" Text="Button" />
		 <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
	</asp:Panel>
</cc1:DTISortable>
<br />
<p>
	<asp:CheckBox ID="cbLayoutOn" runat="server" Text="layout" AutoPostBack="true" /> 
	<asp:Button ID="btnSave" runat="server" Text="Save" /></p>


Code Behind 
   
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        cb.Checked = Sortable1.LayoutOn
    End If
End Sub

Private Sub btnSave_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSave.Click
    Sortable1.Save(True, False)
End Sub

Private Sub cb_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles cb.CheckedChanged
    Sortable1.LayoutOn = cb.Checked
    Response.Redirect(Request.Url.OriginalString)
End Sub

Private Sub btnCheck_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnCheck.Click
    If Label1.Text = "Button clicks still work" Then
        Label1.Text = "Click Button"
    Else
        Label1.Text = "Button clicks still work"
    End If
End Sub
Type Default
isRecyclable Boolean False
Determines if sortable items can be placed in a recyclebin
LayoutOnAll Boolean False
Enables sortable mode for all sortables, Menu's and recyclebins
LayoutOn Boolean False
Enables Sortable Mode for this sortable
AxisRestriction Axis none
Restricts the axis to one particular direction x or y
ConnectByClass Boolean True
Enables drag and drop to sortables with the same class name
ConnectedCSS String DTIConnectedSortable-default
Class name by which multible sortables are connected
ConnectToID String Nothing
Connects one sortable to another specificed by its id
PlaceHolderClass String DTIPlaceHolder-default
Class name for the Placeholder (Shows were sortable item can be dropped)
CursorType Cursor move
Type of curser when moving sortable
CursorPosition CursorAt false
Changes where the cursor is located on a sortable item when it is being moved
CursorPositionValue Integer Nothing
Offset of the cursor position
NoDragOnEmpty Boolean False
Disables dragging to an empty Sortable
HelperType Helper Original
Original if the item is to be moved and clone if it is to be coppied when moving
HandleText String Nothing
Text that goes into the handle of the sortable
HandleSelector String DTIItemHandle-default
Class name, id, or html tag of the handle
ZIndex Integer 0
specifies the stack order of an item
cssTheme String default
DeleteText String X
OuterStyle String border: thin dashed red
Out line style of the sortable when in sorting mode
AutoAddEditPanel Boolean True
Determines if an EditPanel is automatically added to an empty sortable.
AutoWrapInEditPanel boolean True
If sortable contains only literal controls They will be wrapped in a single edit panel Otherwise they are wrapped in ASP panel objects
DTISortable
Id Int
Main_Id Int
Content_Id Int
Width Int
Content_Type String
DTISortableItem
Id Int
Content_Type String
Sort_Order Int
DTISortable_Id Int
Assembly_Name String
isDeleted Boolean
DeleteDate DateTime
Page_Id String