This example shows how to create multiple draggable items efficiently, still allowing for Drop Targets.
+-
+
- Item #1 +
- Item #2 +
- Item #3 +
- Item #4 +
- Item #5 +
- Item #6 +
- Item #7 +
- Item #8 +
- Item #9 +
- Item #10 +
Setting up the Delegate container and items
+First we need to create an HTML Node to act as the delegate container and give it some nodes to make draggable.
+ +<div id="play"> + + <div id="demo"> + <ul> + <li>Item #1</li> + <li>Item #2</li> + <li>Item #3</li> + <li>Item #4</li> + <li>Item #5</li> + <li>Item #6</li> + <li>Item #7</li> + <li>Item #8</li> + <li>Item #9</li> + <li>Item #10</li> + </ul> + </div> + + <div id="drop">Drop on me</div> +</div>+ + +
Now we give them some CSS to make them visible.
+ +#demo {
+ width: 200px;
+}
+#demo ul li {
+ border: 1px solid black;
+ background-color: #8DD5E7;
+ cursor: move;
+ margin: 3px;
+ list-style-type: none;
+ z-index: 2;
+ zoom: 1;
+}
+#play {
+ position: relative;
+ zoom: 1;
+}
+#drop {
+ border: 1px solid black;
+ background-color: #eee;
+ height: 50px;
+ width: 200px;
+ position: absolute;
+ bottom: 5px;
+ right: 5px;
+ zoom: 1;
+}
+#drop strong {
+ font-weight: bold;
+}
+#drop.yui3-dd-drop-over {
+ background-color: #ccc;
+}
+
+
+Setting up the YUI Instance
+Now we need to create our YUI instance and tell it to load the dd-delegate module.
YUI().use('dd-delegate', 'dd-drop-plugin');
+
+
+Making the Nodes draggable
+Now that we have a YUI instance with the dd-delegate module, we need to instantiate the Delegate instance on this container and nodes.
YUI().use('dd-delegate', 'dd-drop-plugin', function(Y) {
+ var del = new Y.DD.Delegate({
+ container: '#demo',
+ nodes: 'li'
+ });
+});
+
+
+Listening to some events
+The Delegate object is a bubble target for the DD.Drag instances. So you can listen on it for all drag related events.
YUI().use('dd-delegate', 'dd-drop-plugin', function(Y) {
+ var del = new Y.DD.Delegate({
+ container: '#demo',
+ nodes: 'li'
+ });
+
+ del.on('drag:end', function(e) {
+ del.get('currentNode').setStyles({
+ top: 0,
+ left: 0
+ });
+ });
+
+});
+
+
+Adding a Drop Target
+Now we can add a normal Drop Target to the page.
+ +var drop = Y.one('#drop').plug(Y.Plugin.Drop);
+
+
+Once that is created, we can add a drop:hit listener and manipulate the drag instance as we normally would.
var drop = Y.one('#drop').plug(Y.Plugin.Drop);
+drop.drop.on('drop:hit', function(e) {
+ drop.set('innerHTML', 'You dropped: <strong>' + e.drag.get('node').get('innerHTML') + '</strong>');
+});
+
+
+Full Javascript Source
+ +YUI().use('dd-delegate', 'dd-drop-plugin', function(Y) {
+ var del = new Y.DD.Delegate({
+ container: '#demo',
+ nodes: 'li'
+ });
+
+ del.on('drag:end', function(e) {
+ del.get('currentNode').setStyles({
+ top: 0,
+ left: 0
+ });
+ });
+
+ var drop = Y.one('#drop').plug(Y.Plugin.Drop);
+ drop.drop.on('drop:hit', function(e) {
+ drop.set('innerHTML', 'You dropped: <strong>' + e.drag.get('node').get('innerHTML') + '</strong>');
+ });
+
+});
+
+