<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example: Drag - Node plugin</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="../../build/yui/yui-min.js"></script>
</head>
<body>
<!--
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
-->
<div id="doc">
<div id="hd">
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
</div>
<a href="#toc" class="jump">Jump to Table of Contents</a>
<h1>Example: Drag - Node plugin</h1>
<div class="yui3-g">
<div class="yui3-u-3-4">
<div id="main">
<div class="content"><div class="intro">
<p>This shows two examples of applying the Drag Plugin to nodes.
The luggage only allows a drag by its handle.</p>
</div>
<div class="example">
<style>
/* Blue box example */
.example .demo {
position:relative;
width:22em;
border: 1px solid #9EA8C6;
background: #ECEFFB;
border-radius: 3px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
text-align: center;
}
.example .demo .yui-hd {
padding: 0 0.3em;
background: #B6BFDA url(../assets/dd/images/drag_handle_hd_bkg.png) repeat-x;
font-weight: bold;
border: solid #B6BFDA;
border-width: 0 8px;
color: #30418C;
line-height: 180%;
font-size: 139%;
cursor: move;
}
.example .demo .yui-hd span{
background-color: #B6BFDA;
padding: 0.1em 0.4em;
text-align: center;
}
.example .demo .yui-bd {
padding: 2em 0.5em 2.5em;
}
/* Luggage */
.example .luggage{
position: relative;
background: url(../assets/dd/images/luggage.png) no-repeat;
width: 377px;
height: 155px;
margin-top: 3em;
}
.example .handle{
position: absolute;
bottom: 1px;
left: 125px;
width: 115px;
height: 60px;
cursor: move;
}
.example .handle:hover{
background: url(../assets/dd/images/luggage_handle.png) no-repeat;
}
</style>
<div class="demo">
<div class="yui-hd"><span>Head</span></div>
<div class="yui-bd">
Only drags from the head
</div>
</div>
<div class="luggage">
<div class="handle"></div>
</div>
<script>
YUI().use('dd-plugin', function(Y) {
var node,
luggage;
// Draggable blue box
node = Y.one('.example .demo');
node.plug(Y.Plugin.Drag);
node.dd.addHandle('.yui-hd');
// Luggage
luggage = Y.one('.example .luggage');
luggage.plug(Y.Plugin.Drag);
luggage.dd.addHandle('.example .luggage .handle');
});
</script>
</div>
<h3 id="setting-up-the-node">Setting up the Node</h3>
<p>First we'll create the HTML for the blue box node.</p>
<pre class="code prettyprint"><div class="demo">
<div class="yui-hd"><span>Head</span></div>
<div class="yui-bd">
Only drags from the head
</div>
</div></pre>
<p>Now we give that Node some CSS visible style.</p>
<pre class="code prettyprint">/* Blue box example */
.example .demo {
position:relative;
width:22em;
border: 1px solid #9EA8C6;
background: #ECEFFB;
border-radius: 3px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
text-align: center;
}
.example .demo .yui-hd {
padding: 0 0.3em;
background: #B6BFDA url(../assets/dd/images/drag_handle_hd_bkg.png) repeat-x;
font-weight: bold;
border: solid #B6BFDA;
border-width: 0 8px;
color: #30418C;
line-height: 1.8;
font-size: 139%;
cursor: move;
}
.example .demo .yui-hd span{
background-color: #B6BFDA;
padding: 0.1em 0.4em;
text-align: center;
}
.example .demo .yui-bd {
padding: 2em 0.5em 2.5em;
}</pre>
<h3 id="setting-up-the-yui-instance">Setting up the YUI Instance</h3>
<p>Now we need to create our YUI instance and tell it to load the <code>dd-plugin</code> module.</p>
<pre class="code prettyprint">YUI().use('dd-plugin');</pre>
<h3 id="making-the-blue-box-draggable-with-the-drag-plugin">Making the blue box draggable with the Drag Plugin</h3>
<p>Now that we have a YUI instance with the <code>dd-plugin</code> module, we can plug the
<code>Drag</code> plugin into <code>Node</code> instances to make them draggable.</p>
<pre class="code prettyprint">YUI().use('dd-plugin', function(Y) {
// The blue box
var node = Y.one('.example .demo');
node.plug(Y.Plugin.Drag);
});</pre>
<h3 id="accessing-the-drag-instance">Accessing the Drag instance</h3>
<p>Now that we have a draggable Node, you can get access to the Drag
Instance from the <code>dd</code> namespace on the <code>Node</code> instance.</p>
<h4 id="using-a-drag-handle">Using a drag handle</h4>
<p>Drag handles allow you to specify what element will initiate a drag. For example,
you may want the entire element to be able to be dragged, but you only want them to
click on the header to do that (in case you have content that will not react well to
a drag, like an <code>input</code> or an <code>anchor</code>).</p>
<pre class="code prettyprint">YUI().use('dd-plugin', function(Y) {
// The blue box
var node = Y.one('.example .demo');
node.plug(Y.Plugin.Drag);
//Now you can only drag it from the .yui-hd at the top of the blue box
node.dd.addHandle('.yui-hd');
});</pre>
<h3 id="the-luggage">The Luggage</h3>
<p>The draggable luggage is much the same as the blue box.
The HTML looks like this...
</p>
<pre class="code prettyprint"><div class="luggage">
<div class="handle"></div>
</div></pre>
<p>This is the YUI instance with the <code>dd-plugin</code> module for luggage.</p>
<pre class="code prettyprint">YUI().use('dd-plugin', function(Y) {
var luggage = Y.one('.example .luggage');
luggage.plug(Y.Plugin.Drag);
luggage.dd.addHandle('.example .luggage .handle');
});</pre>
<p>The last rule of CSS for luggage makes the handle pop up.</p>
<pre class="code prettyprint">/* Luggage */
.example .luggage{
position: relative;
background: url(../assets/dd/images/luggage.png) no-repeat;
width: 377px;
height: 155px;
margin-top: 3em;
}
.example .handle{
position: absolute;
bottom: 1px;
left: 125px;
width: 115px;
height: 60px;
cursor: move;
}
.example .handle:hover{
background: url(../assets/dd/images/luggage_handle.png) no-repeat;
}</pre>
<h3 id="the-full-source">The Full Source</h3>
<pre class="code prettyprint"><style>
/* Blue box example */
.example .demo {
position:relative;
width:22em;
border: 1px solid #9EA8C6;
background: #ECEFFB;
border-radius: 3px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
text-align: center;
}
.example .demo .yui-hd {
padding: 0 0.3em;
background: #B6BFDA url(../assets/dd/images/drag_handle_hd_bkg.png) repeat-x;
font-weight: bold;
border: solid #B6BFDA;
border-width: 0 8px;
color: #30418C;
line-height: 180%;
font-size: 139%;
cursor: move;
}
.example .demo .yui-hd span{
background-color: #B6BFDA;
padding: 0.1em 0.4em;
text-align: center;
}
.example .demo .yui-bd {
padding: 2em 0.5em 2.5em;
}
/* Luggage */
.example .luggage{
position: relative;
background: url(../assets/dd/images/luggage.png) no-repeat;
width: 377px;
height: 155px;
margin-top: 3em;
}
.example .handle{
position: absolute;
bottom: 1px;
left: 125px;
width: 115px;
height: 60px;
cursor: move;
}
.example .handle:hover{
background: url(../assets/dd/images/luggage_handle.png) no-repeat;
}
</style>
<div class="demo">
<div class="yui-hd"><span>Head</span></div>
<div class="yui-bd">
Only drags from the head
</div>
</div>
<div class="luggage">
<div class="handle"></div>
</div>
<script>
YUI().use('dd-plugin', function(Y) {
var node,
luggage;
// Draggable blue box
node = Y.one('.example .demo');
node.plug(Y.Plugin.Drag);
node.dd.addHandle('.yui-hd');
// Luggage
luggage = Y.one('.example .luggage');
luggage.plug(Y.Plugin.Drag);
luggage.dd.addHandle('.example .luggage .handle');
});
</script></pre>
</div>
</div>
</div>
<div class="yui3-u-1-4">
<div class="sidebar">
<div id="toc" class="sidebox">
<div class="hd">
<h2 class="no-toc">Table of Contents</h2>
</div>
<div class="bd">
<ul class="toc">
<li>
<a href="#setting-up-the-node">Setting up the Node</a>
</li>
<li>
<a href="#setting-up-the-yui-instance">Setting up the YUI Instance</a>
</li>
<li>
<a href="#making-the-blue-box-draggable-with-the-drag-plugin">Making the blue box draggable with the Drag Plugin</a>
</li>
<li>
<a href="#accessing-the-drag-instance">Accessing the Drag instance</a>
<ul class="toc">
<li>
<a href="#using-a-drag-handle">Using a drag handle</a>
</li>
</ul>
</li>
<li>
<a href="#the-luggage">The Luggage</a>
</li>
<li>
<a href="#the-full-source">The Full Source</a>
</li>
</ul>
</div>
</div>
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="A simple drag interaction that doesn't require a drop interaction.">
<a href="simple-drag.html">Simple Drag</a>
</li>
<li data-description="How to apply the Drag Plugin to a node.">
<a href="drag-plugin.html">Drag - Node plugin</a>
</li>
<li data-description="A simple proxy drag interaction that doesn't require a drop interaction.">
<a href="proxy-drag.html">Drag - Proxy</a>
</li>
<li data-description="How to constrain a draggable Node to another Node's region.">
<a href="constrained-drag.html">Drag - Constrained to a Region</a>
</li>
<li data-description="Using interaction groups, this example demonstrates how to tie into the Drag & Drop Utility's interesting moments to provide visual affordances for the current drag operation.">
<a href="groups-drag.html">Drag - Interaction Groups</a>
</li>
<li data-description="The use of the drag shim when dragging nodes over other troublesome nodes.">
<a href="shim-drag.html">Using the Drag Shim</a>
</li>
<li data-description="How to use the Drop Target events to code your application.">
<a href="drop-code.html">Using Drop Based Coding</a>
</li>
<li data-description="How you can use the DD Scroll plugin to scroll the browser window as you drag.">
<a href="winscroll.html">Window Scrolling</a>
</li>
<li data-description="How to use DD.Delegate to create a scalable solution which supports multiple draggable items.">
<a href="delegate.html">Drag Delegation</a>
</li>
<li data-description="Using DD.Delegate to support dragging multiple items and dropping them onto a Drop Target.">
<a href="delegate-drop.html">Drag Delegation with a Drop Target</a>
</li>
<li data-description="How to use Drag plugins with a DD Delegate based solution.">
<a href="delegate-plugins.html">Using Drag Plugins with Delegate</a>
</li>
<li data-description="This example shows how to make a sortable list using Custom Event Bubbling.">
<a href="list-drag.html">List Reorder w/Bubbling</a>
</li>
<li data-description="This example shows how to make a sortable list using Custom Event Bubbling and Node Scrolling.">
<a href="scroll-list.html">List Reorder w/Scrolling</a>
</li>
<li data-description="How to make an animated node a Drop target.">
<a href="anim-drop.html">Animated Drop Targets</a>
</li>
<li data-description="Example Photo Browser application.">
<a href="photo-browser.html">Photo Browser</a>
</li>
<li data-description="Portal style example using Drag & Drop Event Bubbling and Animation.">
<a href="portal-drag.html">Portal Style Example</a>
</li>
</ul>
</div>
</div>
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples That Use This Component</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="Working with multiple YUI instances.">
<a href="../yui/yui-multi.html">Multiple Instances</a>
</li>
<li data-description="Use StyleSheet to adjust the CSS rules applying a page theme from user input">
<a href="../stylesheet/stylesheet-theme.html">Adjusting a Page Theme on the Fly</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script>
YUI.Env.Tests = {
examples: [],
project: '../assets',
assets: '../assets/dd',
name: 'drag-plugin',
title: 'Drag - Node plugin',
newWindow: '',
auto: false
};
YUI.Env.Tests.examples.push('simple-drag');
YUI.Env.Tests.examples.push('drag-plugin');
YUI.Env.Tests.examples.push('proxy-drag');
YUI.Env.Tests.examples.push('constrained-drag');
YUI.Env.Tests.examples.push('groups-drag');
YUI.Env.Tests.examples.push('shim-drag');
YUI.Env.Tests.examples.push('drop-code');
YUI.Env.Tests.examples.push('winscroll');
YUI.Env.Tests.examples.push('delegate');
YUI.Env.Tests.examples.push('delegate-drop');
YUI.Env.Tests.examples.push('delegate-plugins');
YUI.Env.Tests.examples.push('list-drag');
YUI.Env.Tests.examples.push('scroll-list');
YUI.Env.Tests.examples.push('anim-drop');
YUI.Env.Tests.examples.push('photo-browser');
YUI.Env.Tests.examples.push('portal-drag');
YUI.Env.Tests.examples.push('yui-multi');
YUI.Env.Tests.examples.push('stylesheet-theme');
</script>
<script src="../assets/yui/test-runner.js"></script>
</body>
</html>