<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Interaction Groups</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<!--there is no custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Interaction Groups</h1>
<div class="exampleIntro">
<p>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.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<style>
.slot {
border: 2px solid #808080;
background-color: #CDCDCD;
color: #666666;
text-align: center;
position: relative;
float: left;
margin: 4px;
width: 60px;
height: 60px;
z-index: 0;
}
.player {
border: 2px solid #808080;
color: #ffffff;
text-align: center;
position: relative;
float: left;
margin: 4px;
width: 60px;
height: 60px;
top: 150px;
z-index: 1;
cursor: move;
}
#pt1 {
clear: both;
}
.bottom {
top: 50px;
}
#pt1, #pt2 {
background-color: #71241A;
}
#pb1, #pb2 {
background-color: #004C6D;
}
#pboth1, #pboth2 {
background-color: #FFA928;
}
#workarea {
position: relative;
height: 300px;
width: 500px;
}
#workarea .yui-dd-drop-active-valid {
border: 2px solid green;
}
#workarea .yui-dd-drop-over {
background-color: green;
}
#workarea .yui-dd-drop-active-invalid {
border: 2px solid red;
}
</style>
<div id="workarea">
<div class="slot" id="t1">1</div>
<div class="slot bottom" id="b1">3</div>
<div class="slot bottom" id="b2">4</div>
<div class="slot bottom" id="b3">5</div>
<div class="slot bottom" id="b4">6</div>
<div class="slot" id="t2">2</div>
<div class="player" id="pt1">1</div>
<div class="player" id="pt2">2</div>
<div class="player" id="pb1">3</div>
<div class="player" id="pb2">4</div>
<div class="player" id="pboth1">5</div>
<div class="player" id="pboth2">6</div>
</div>
<script>
var config = {base:"../../build/", timeout: 10000};
config.filter = 'raw';
YUI(config).use('dd-drop', 'dd-proxy', 'dd-constrain', function(Y) {
var slots = Y.Node.get('#workarea').queryAll('.slot');
Y.each(slots, function(v, k) {
var id = v.get('id'), groups = ['two'];
switch (id) {
case 't1':
case 't2':
groups = ['one'];
break;
}
var drop = new Y.DD.Drop({
node: v,
groups: groups
});
});
var players = Y.Node.get('#workarea').queryAll('.player');
Y.each(players, function(v, k) {
var id = v.get('id'), groups = ['one', 'two'];
switch (id) {
case 'pt1':
case 'pt2':
groups = ['one'];
break;
case 'pb1':
case 'pb2':
groups = ['two'];
break;
}
var drag = new Y.DD.Drag({
node: v,
groups: groups,
dragMode: 'intersect'
}).plug(Y.Plugin.DDProxy, {
moveOnEnd: false
}).plug(Y.Plugin.DDConstrained, {
constrain2node: '#workarea'
});
drag.on('drag:start', function() {
var p = this.get('dragNode'),
n = this.get('node');
n.setStyle('opacity', .25);
if (!this._playerStart) {
this._playerStart = this.nodeXY;
}
p.set('innerHTML', n.get('innerHTML'));
p.setStyles({
backgroundColor: n.getStyle('backgroundColor'),
color: n.getStyle('color'),
opacity: .65
});
});
drag.on('drag:end', function() {
var n = this.get('node');
n.setStyle('opacity', '1');
});
drag.on('drag:drophit', function(e) {
var xy = e.drop.get('node').getXY();
this.get('node').setXY(xy, Y.UA.ie);
});
drag.on('drag:dropmiss', function(e) {
if (this._playerStart) {
this.get('node').setXY(this._playerStart, Y.UA.ie);
this._playerStart = null;
}
});
});
});
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>