DropPanel

This feature is setup as a landing place for draggable items on the page. When items are drop onto the panel currently they will be added to a un-ordered list.

Additional Features

  • AllowItems - The class of items that are allowed to be added to this panel. This can be used to limit the different items on the page that are draggable but may not be allowed in this panel.
  • HoverClass - When page elements that are dragged over the panel that are allowed to be added you can add this class to the <ul> tag as an interface indicator that these items are allowed to be added to this panel.
  • Items - This is a list of items that are already in the panel. This parameter can only be accessed using the code behind page.
  • PlaceHolder - The message that is displayed when there are no items defined. Default message is "Place Items Here".
  • RemoveClass - Class of items in the panel that will be removed when an allowed item is dropped on the panel. By default this is set to "placeholder".
  • Text - Even though this items is defined in the base control class it is used in this element as a comma separated list of items. Anything in this parameter will be added to the control as an <LI> item.

Item Methods

  • AddItem(String item) - Add an item to the list using.
  • AddItem(Strikng key, String item) - Add an item to the list using the provided key

Example Code

This is a basic panel that adds drop ability to a page for any draggable items.
<zax:DropPanel ID="dropZone" runat="server" CssClass="width120" HoverClass="border"
	Label="Item List" />

It is important that draggable items and the drop panel have the same width. In this example it shows the CssClass set to width120 so adding this to draggable items will make sure they can be dropped in this panel. If you are having problems with draggable items not activating the panel when dragging over it and being drop on it the problem is they have different widths.

When this page is rendered it will draw a list on the page with one item in it telling users that you can place items in this list.

In this example it shows how to limit the items that area allowed to be dropped in the panel.
<zax:DropPanel ID="dropZone" runat="server" CssClass="width120" AllowItems="dragItem" 
	HoverClass="border" Label="Item List" />

Code Behind to add items to the panel
protected void Page_Load(object sender, EventArgs e)
{
	dropZone.AddItem("Red");
	dropZone.AddItem("Green");
	dropZone.AddItem("Blue");
	dropZone.AddItem("Yellow");
}



Last edited May 2, 2014 at 6:37 PM by lede701, version 2