This example shows how to work with multiple YUI instances.
Here we will create our first YUI instance and tell it to load the anim
module.
YUI().use('anim', function(Y) { });
Now let's setup a simple animation on the Node #demo
.
YUI().use('anim', function(Y) { var anim = new Y.Anim({ node: '#demo', to: { height: 50, width: 150 }, from: { height: 100, width: 100 }, direction: 'alternate', iterations: 30, duration: .5 }); anim.run(); });
Here we will create our second YUI instance and tell it to load the dd-drag
module.
Since we didn't specify the anim
module, we will not have access to it in this instance.
YUI().use('dd-drag', function(Y) { });
Now let's make the same node draggable (while it's animated).
YUI().use('dd-drag', function(Y) { var dd = new Y.DD.Drag({ node: '#demo' }); });
<style> #demo { height: 100px; width: 100px; border: 1px solid black; background-color: #8DD5E7; cursor: move; } #play { height: 200px; } </style> <div id="play"> <div id="demo"></div> </div> <script> YUI().use('anim', function(Y) { var anim = new Y.Anim({ node: '#demo', to: { height: 50, width: 150 }, from: { height: 100, width: 100 }, direction: 'alternate', iterations: 30, duration: .5 }); anim.run(); }); YUI().use('dd-drag', function(Y) { var dd = new Y.DD.Drag({ node: '#demo' }); }); </script>