Provide drag & drop behavior for Select2MultiChoice components using jquery-ui, fixes ivaynberg#38

Author: tgoetz

wicket-select2-examples/src/main/java/com/vaynberg/wicket/select2/HomePage.html

@@ -50,7 +50,7 @@ <h1>Single-Select <small>Ajax result loading. Paging with infinite scrolling. Mi
 		</section>
 		<section>
 			<div class="page-header">
-				<h1>Multi-Select <small>Ajax result loading. Paging with infinite scrolling. Minimum input length</small></h1>
+				<h1>Multi-Select <small>Ajax result loading. Paging with infinite scrolling. Minimum input length. Drag &amp; Drop</small></h1>
 			</div>
 			<div class="row">
 				<div class="span12">

wicket-select2-examples/src/main/java/com/vaynberg/wicket/select2/HomePage.java

@@ -60,6 +60,7 @@ public HomePage() {
 	Select2MultiChoice<Country> countries = new Select2MultiChoice<Country>("countries",
 		new PropertyModel<Collection<Country>>(this, "countries"), new CountriesProvider());
 	countries.getSettings().setMinimumInputLength(1);
+    countries.add(new DragAndDropBehavior());
 	multi.add(countries);
 
     }

wicket-select2/src/main/java/com/vaynberg/wicket/select2/ApplicationSettings.java

@@ -35,11 +35,15 @@ public class ApplicationSettings {
         "res/select2.js");
     private ResourceReference mouseWheelReference = new PackageResourceReference(ApplicationSettings.class,
         "res/jquery.mousewheel.js");
-    private ResourceReference cssReference = new PackageResourceReference(ApplicationSettings.class, "res/select2.css");
+    private ResourceReference cssReference = new PackageResourceReference(ApplicationSettings.class,
+        "res/select2.css");
+    private ResourceReference jqueryUIReference = new PackageResourceReference(ApplicationSettings.class,
+        "res/jquery-ui-1.9.0.min.js");
 
     private boolean includeMouseWheel = true;
     private boolean includeJavascript = true;
     private boolean includeCss = true;
+    private boolean includeJqueryUI = true;
 
     /**
      * Private constructor, use {@link #get()} instead.
@@ -65,6 +69,15 @@ public ApplicationSettings setIncludeCss(boolean includeCss) {
 	return this;
     }
 
+    public boolean isIncludeJqueryUI() {
+    return includeJqueryUI;
+    }
+
+    public ApplicationSettings setIncludeJqueryUI(boolean includeJqueryUI) {
+    this.includeJqueryUI = includeJqueryUI;
+    return this;
+    }
+
     public ResourceReference getJavaScriptReference() {
 	return javaScriptReference;
     }
@@ -101,6 +114,15 @@ public ApplicationSettings setMouseWheelReference(ResourceReference mousewheelRe
 	return this;
     }
 
+    public ResourceReference getJqueryUIReference() {
+    return jqueryUIReference;
+    }
+
+    public ApplicationSettings setJqueryUIReference(ResourceReference jqueryUIReference) {
+    this.jqueryUIReference = jqueryUIReference;
+    return this;
+    }
+
     /**
      * Retrieves the instance of settings object.
      * 

wicket-select2/src/main/java/com/vaynberg/wicket/select2/DragAndDropBehavior.java

@@ -0,0 +1,35 @@
+package com.vaynberg.wicket.select2;
+
+import org.apache.wicket.Component;
+import org.apache.wicket.behavior.Behavior;
+import org.apache.wicket.markup.head.IHeaderResponse;
+import org.apache.wicket.markup.head.JavaScriptHeaderItem;
+import org.apache.wicket.markup.head.OnDomReadyHeaderItem;
+
+/**
+ * Adds drag & drop behavior to Select2MultiChoice components, i.e.
+ * the list of selected values can be sorted.
+ *
+ * @author Tom Götz (tom@decoded.de)
+ */
+public class DragAndDropBehavior extends Behavior {
+
+    @Override
+    public void renderHead(Component component, IHeaderResponse response) {
+
+        // Include jquery-ui reference, if configured
+        final ApplicationSettings settings = ApplicationSettings.get();
+        if (settings.isIncludeJqueryUI()) {
+            response.render(JavaScriptHeaderItem.forReference(settings.getJqueryUIReference()));
+        }
+
+        // Render script to enable sortable/drag-and-drop behavior
+        String script = "$('#%1$s').select2('container').find('ul.select2-choices').sortable({" +
+                "containment: 'parent'," +
+                "start: function() { $('#%1$s').select2('onSortStart'); }," +
+                "update: function() { $('#%1$s').select2('onSortEnd'); }" +
+                "});";
+        response.render(OnDomReadyHeaderItem.forScript(JQuery.execute(script, component.getMarkupId())));
+    }
+
+}