Skip to content

Instantly share code, notes, and snippets.

@amusarra

amusarra/SortableMultiFull.html

Created November 25, 2013 15:59
Show Gist options
  • Save amusarra/7643617 to your computer and use it in GitHub Desktop.
Save amusarra/7643617 to your computer and use it in GitHub Desktop.
Download ZIP
Example: Multiple Lists - Full Join - YUI Library
Raw
SortableMultiFull.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example: Multiple Lists - Full Join - YUI Library</title>
<meta name="viewport" content="width=960" id="meta-viewport">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
<link rel="stylesheet" href="http://yui.yahooapis.com/3.9.0/build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="http://yuilibrary.com/combo/css?main-min.css">
<link rel="stylesheet" href="http://yuilibrary.com/vendor/prettify/prettify-min.css">
<link rel="stylesheet" href="http://yuilibrary.com/css/docs-min.css">
<script src="http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">
<div class="example">
<style>
#demo h4 {
margin: 10px auto;
width: 200px;
text-align: center;
}
#demo h6 {
margin: 10px auto;
width: 165px;
text-align: center;
}
#demo ul {
margin: 0 auto;
width: 165px;
padding: 0;
}
#demo li {
list-style-type: none;
padding: 3px;
width: 150px;
margin: 6px;
font-size: 114%;
-moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
cursor: move;
}
#demo li.one {
background-color: #B6BFDA;
border: 1px solid #7E869D;
text-align: center;
}
#demo li.two {
background-color: #F2C89F;
border: 1px solid #B19C87;
text-align: center;
}
#demo li.three {
background-color: #C2C89F;
border: 1px solid #B19C87;
text-align: center;
}
#demo .indent1{
text-indent:0.8em;
}
#demo .indent2{
text-indent:1.6em;
}
#demo .indent3{
text-indent:2.4em;
}
#demo .indent4{
text-indent:3.2em;
}
#demo .indent5{
text-indent:4.0em;
}
#demo .indent6{
text-indent:4.8em;
}
#demo .indent7{
text-indent:5.6em;
}
#demo .indent8{
text-indent:6.4em;
}
#demo .indent9{
text-indent:7.2em;
}
#demo .indent10{
text-indent:8.0em;
}
.example .arrow {
display: none;
height: 28px;
margin: 10px auto;
width: 300px;
position: relative;
background-repeat: no-repeat;
}
.example .arrow em {
display: block;
position: absolute;
top: 0;
right: 0;
height: 28px;
width: 19px;
background-repeat: no-repeat;
}
.example .arrow div {
height: 8px;
position: relative;
top: 10px;
margin: 0 5px;
font-size: 1px; /* for IE */
background-color: #d9d9d9;
}
.example .arrow-full {
display: block;
background-image: url(http://yuilibrary.com/yui/docs/assets/sortable/arrow-left.png);
}
.example .arrow-full em {
background-image: url(http://yuilibrary.com/yui/docs/assets/sortable/arrow-right.png);
}
.example .arrow-out {
display: block;
}
.example .arrow-out em {
background-image: url(http://yuilibrary.com/yui/docs/assets/sortable/arrow-right.png);
}
.example .arrow-in {
display: block;
background-image: url(http://yuilibrary.com/yui/docs/assets/sortable/arrow-left.png);
}
</style>
<div id="demo" class="yui3-g">
<div class="yui3-u-1-2" id="leftWorkarea">
<h4 class="no-toc">PDA IN PROD. (AWP)</h4>
<h6 class="no-toc">PDA 4905933</h6>
<ul id="list1-left">
<li class="one" data-from-list="list1-left">KN02734871R</li>
<li class="one" data-from-list="list1-left">KN02736554R</li>
<li class="one" data-from-list="list1-left">JN02700269W</li>
<li class="one" data-from-list="list1-left">KN02736551U</li>
<li class="one" data-from-list="list1-left">KN02736559M </li>
</ul>
<h6 class="no-toc">PDA 4905801</h4>
<ul id="list2-left">
<li class="two" data-from-list="list2-left">MN02734871R</li>
<li class="two" data-from-list="list2-left">JT02736554R</li>
<li class="two" data-from-list="list2-left">JN02700269W</li>
<li class="two" data-from-list="list2-left">PO02736551U</li>
<li class="two">BN02736559M </li>
</ul>
<h6 class="no-toc">PDA 5905801</h6>
<ul id="list3-left">
<li class="three" data-from-list="list3-left">MN02780971R</li>
<li class="three" data-from-list="list3-left">JJ02936554R</li>
<li class="three" data-from-list="list3-left">JP12800269V</li>
<li class="three" data-from-list="list3-left">PO02736551U</li>
<li class="three" data-from-list="list3-left">BN02736559M </li>
</ul>
</div>
<div class="yui3-u-1-2" id="rightWorkarea">
<h4 class="no-toc">PDA IN SOST. (AWP)</h4>
<h6 class="no-toc">PDA 4705801</h6>
<ul id="list1-right">
</ul>
<h6 class="no-toc">PDA 5805805</h6>
<ul id="list2-right">
</ul>
</div>
<button type="button" id="make">Add More</button>
</div>
<script>
YUI().use('dd-delegate', 'dd-drop-plugin', 'dd-constrain', 'sortable', 'dd-drop', 'dd-proxy', function(Y) {
var list1Left = new Y.Sortable({
container: '#list1-left',
nodes: 'li',
opacity: '.1'
});
var list2Left = new Y.Sortable({
container: '#list2-left',
nodes: 'li',
opacity: '.1'
});
var list3Left = new Y.Sortable({
container: '#list3-left',
nodes: 'li',
opacity: '.1'
});
var list1Right = new Y.Sortable({
container: '#list1-right',
nodes: 'li',
opacity: '.1'
});
var list2Right = new Y.Sortable({
container: '#list2-right',
nodes: 'li',
opacity: '.1'
});
list1Left.join(list1Right);
list2Left.join(list1Right);
list3Left.join(list1Right);
list1Left.join(list2Right);
list2Left.join(list2Right);
list3Left.join(list2Right);
list1Right.join(list2Right);
Y.one('#make').on('click', function(e) {
var newPDASection = Y.one('#rightWorkarea');
newPDASection.append('<h6 class="no-toc">PDA 5912805</h6><ul id="list3-right"></ul>');
var list3Right = new Y.Sortable({
container: '#list3-right',
nodes: 'li',
opacity: '.1'
});
list1Right.join(list2Right);
list1Right.join(list3Right);
list2Right.join(list3Right);
});
Y.DD.DDM.on('drag:end', function(event) {
var drag = event.target;
var fromList = drag.get('node').getAttribute('data-from-list');
var parentElement = event.target.get('node').get('parentElement');
var workArea = parentElement.get('parentElement').get('id');
if(workArea == 'leftWorkarea') {
if(fromList == parentElement.get('id')) {
Y.log("You're my son and you accept it.");
} else {
Y.log("You're not my son and you will not accept it.");
alert("You're not my son and you will not accept it.");
}
}
});
});
</script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment