DropTarget
Provides drag and drop functionality. Based on the dnd package in dojo.dnd. This will allow you to create abitrary sets of html elements/components that can be dragged around the screen and "dropped" into a target area.
See also: Live Demo
Parameters
| Name | Type | Direction | Required | Default | Description |
|---|---|---|---|---|---|
| acceptsTagType | List | no | '*' | Specifies the list of html tag types that this target accepts, any element dragged over the target without one of the specified tag types (* will accept all) will not be allowed to "drop" into the target. | |
| dragSource |
Object
String[] Collection |
no | Object,String[],Collection of component/element ids (the rendered html must contain an id= attribute for them to be collected properly) to make draggable into this drop target area. | ||
| dragSourceElement | String | no | If specified, used to add draggable sources by iterating over the child nodes of the specified source element. If dragSourceClass or dragSourceTag aren't specified for selecting child nodes then div tag type is used by default. It is very important to specify an "id" attribute on these nodes, otherwise the drag target won't have any way to identify them when trying to invoke the dragSourceAction. (If that's important for your purposes.) | ||
| dragSourceClass | String | no | Used in conjunction with dragSourceElement to select all child nodes that have a class name matching dragSourceClass. | ||
| dragSourceTag | String | no | Used in conjunction with dragSourceElement to select all child nodes that have a tag type matching dragSourceTag. | ||
| dragSourceLink | AjaxDirectLink | yes | Specifies the action to take when a draggable source is dropped into this dropTarget using an AjaxDirectLink component. The unique id of the dragged source object will be appended to whatever AjaxDirectLink url is specified here. If a node iterated via dragSourceElement does not have an id attribute it won't be added as a draggable source. The parameterName of the links selected draggable source will be dragSourceId. | ||
| insertDragSource | boolean | no | true | Specifies whether or not to allow the dragged source html elements to be inserted into the DropTarget. | |
| onDragOver | String | no | If specified, the javascript specified here will be executed when drag source objects are dragged over the drop target. The event passed in has a special attribute, dragObject which is the source of the drag. Useful for performing effects on drop target, like changing the background color. | ||
| onDragOut | String | no | If specified, the javascript specified here will be executed when drag source objects are dragged out of the drop target. The event passed in has a special attribute, dragObject which is the source of the drag. Useful for performing effects on drop target, like changing the background color. | ||
| onDrop | String | no | If specified, the javascript specified here will be executed when drag source objects are dropped into the drop target. The event passed in has a special attribute, dragObject which is the source of the drag. Overriding this parameter won't have any affect on insertDragSource. |
Body: allowed
Informal parameters: allowed
Reserved parameters: none
Examples
DropTarget from demo
HTML template
<div id="explorer">
<h3>Country Explorer</h3>
<div jwcid="@Any" id="container">
<div jwcid="fisheye" >
<div jwcid="@Any"
id="ognl:currItem.getCountry()"
class="listItem"
dojoType="FisheyeListItem">
<a href="javascript:alert('shouldnt happen');" >
<img jwcid="flagImage" width="34" height="18"/></a>
</div>
</div>
</div>
<div jwcid="selectedCountries" >
<ul id="selectList">
<span jwcid="selCountries" >
<li jwcid="@Any" id="ognl:currItem"><span jwcid="@Insert" value="ognl:currItem" /></li>
</span>
</ul>
</div>
<div id="statusBar" >
Total:<span id="total" jwcid="@Any" class="summary" >
<span jwcid="@Insert" value="ognl:selectedItems.size()"/></span>
<span jwcid="removeDrop"><img id="trash" src="img/trash-empty.png" /></span>
</div>
</div>
Page specification
<page-specification class="net.sf.tacos.demo.pages.ajax.DragAndDropExample">
<description>Shows complex interactions</description>
<property name="currItem" />
<property name="index" />
<property name="selectItem" />
<property name="selectedItems" persist="session"
initial-value="ognl:new java.util.HashSet()"/>
<component id="foreachItem" type="tacos:PartialFor">
<binding name="source" value="items"/>
<binding name="value" value="currItem"/>
<binding name="index" value="ognl:index" />
</component>
<component id="selCountries" type="tacos:PartialFor">
<binding name="source" value="ognl:selectedItems"/>
<binding name="value" value="ognl:currItem"/>
</component>
<component id="addCountryLink" type="tacos:AjaxDirectLink">
<binding name="listener" value="listener:addCountry"/>
<binding name="updateComponents"
value="ognl:{'selectedCountries','total'}"/>
<binding name="highlight"
value="literal:any([255,255,184], 500, 500)"/>
<binding name="statusElement" value="literal:status" />
<binding name="processScripts" value="ognl:true" />
</component>
<component id="removeCountryLink" type="tacos:AjaxDirectLink">
<binding name="listener" value="listener:removeCountry" />
<binding name="updateComponents"
value="ognl:{'selectedCountries','total','fisheye'}" />
<binding name="highlight"
value="literal:any([255,255,184], 500, 500)" />
<binding name="statusElement" value="literal:status" />
<binding name="processScripts" value="ognl:true" />
</component>
<component id="flagImage" type="Any">
<binding name="src"
value="ognl:'http://setiathome.free.fr/images/flags/' + currItem.country.toLowerCase() + '.gif'"/>
</component>
<component id="insertTime" type="Insert">
<binding name="format"
value="@net.sf.tacos.demo.pages.ajax.DragAndDropExample@DATE_FORMAT"/>
<binding name="value" value="new java.util.Date()"/>
</component>
<component id="selectedCountries" type="tacos:DropTarget" >
<binding name="dragSourceElement" value="literal:container" />
<binding name="dragSourceTag" value="literal:div" />
<binding name="onDragOver" value="literal:dragOver" />
<binding name="onDragOut" value="literal:dragOut" />
<binding name="insertDragSource" value="ognl:false" />
<binding name="dragSourceLink" value="component:addCountryLink" />
<binding name="acceptsTagType" value="{'div'}" />
</component>
<component id="removeDrop" type="tacos:DropTarget" >
<binding name="dragSource" value="ognl:selectedItems" />
<binding name="onDragOver" value="literal:removeDragOver" />
<binding name="onDragOut" value="literal:removeDragOut" />
<binding name="insertDragSource" value="ognl:false" />
<binding name="dragSourceLink" value="component:removeCountryLink" />
<binding name="acceptsTagType" value="{'li'}" />
</component>
<component id="fisheye" type="tacos:FisheyeList" >
<binding name="breakOn"
value="ognl:@net.sf.tacos.demo.pages.ajax.DragAndDropExample@MAX_LIST_SIZE" />
<binding name="source" value="ognl:items" />
<binding name="value" value="ognl:currItem" />
</component>
<asset name="trash" path="img/trash.png"/>
<asset name="trashEmpty" path="img/trash-empty.png"/>
</page-specification>
Java sources
public abstract class FotoManager extends BasePage {
/** Logger */
private static final Log log = LogFactory.getLog(FotoManager.class);
/** Format of times */
public static final DateFormat DATE_FORMAT =
DateFormat.getDateTimeInstance(DateFormat.SHORT, DateFormat.LONG);
/** Maximum fisheyelist row size */
public static final int MAX_LIST_SIZE = 8;
/**
* Generates list of countries based on locale and sorts
* them by name.
* @return
*/
public List getItems() {
Set countries = new HashSet();
Locale[] locales = Locale.getAvailableLocales();
List items = new ArrayList(locales.length);
for (int i = 0; i < MAX_LIST_SIZE * 3; i++) {
Locale l = locales[i];
if (getSelectedItems().contains(l.getDisplayCountry())) continue;
log.debug("Country not skipped " + l.getDisplayCountry());
if (!"".equals(l.getDisplayCountry()) && !countries.contains(l.getCountry())) {
items.add(l);
countries.add(l.getCountry());
}
}
Collections.sort(items, new Comparator() {
public int compare(Object o1, Object o2) {
Locale l1 = (Locale) o1;
Locale l2 = (Locale) o2;
return l1.getDisplayCountry().compareTo(l2.getCountry());
}
});
return items;
}
/**
* Adds a new country
* @param cycle
*/
public void addCountry(IRequestCycle cycle) {
String countryCode = (String)cycle.getParameter("dragSourceId");
Locale selected = new Locale(Locale.ENGLISH.getLanguage(), countryCode);
Set s = getSelectedItems();
s.add(selected.getDisplayCountry());
setSelectedItems(s);
log.debug("Added " + selected.getDisplayCountry() + " display country.");
AjaxWebRequest ajax =
(AjaxWebRequest)getRequestCycle().getAttribute(AjaxWebRequest.AJAX_REQUEST);
if (ajax != null) ajax.addStatusResponse(selected.getDisplayCountry() + " added..");
}
/**
* Removes a country from the selected list
* @param cycle
*/
public void removeCountry(IRequestCycle cycle) {
String countryCode = (String)cycle.getParameter("dragSourceId");
Set s = getSelectedItems();
s.remove(countryCode);
setSelectedItems(s);
log.debug("Removed " + countryCode + " display country.");
AjaxWebRequest ajax =
(AjaxWebRequest)getRequestCycle().getAttribute(AjaxWebRequest.AJAX_REQUEST);
if (ajax != null) ajax.addStatusResponse(countryCode + " removed..");
}
public abstract Set getSelectedItems();
public abstract void setSelectedItems(Set selectedItems);
}