index.php revision c1d636510c72fa4e56bc9c7c20ec9c061695ba62
2521N/A<?php
2521N/A$count = (($_GET['count"]) ? $_GET['count"] : 10);
2521N/A?>
2521N/A<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2521N/A<html>
2521N/A<head>
4668N/A <title>YUI: DragDrop</title>
2521N/A <!--link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset-fonts-grids/reset-fonts-grids.css"-->
2521N/A <style type="text/css" media="screen">
2892N/A p, h2 {
2892N/A margin: 1em;
2892N/A }
2892N/A
2892N/A #demo {
2892N/A border: 1px solid black;
2892N/A height: 700px;
2521N/A margin: 2em;
2521N/A position: relative;
2521N/A }
2521N/A #demo ul {
2521N/A border: 1px solid blue;
2521N/A width: 200px;
2521N/A float: left;
2521N/A min-height: 100px;
2521N/A }
2521N/A #demo .item {
2521N/A border: 2px solid black;
2521N/A background-color: #ccc;
2521N/A margin: 4px;
2521N/A }
2521N/A #demo .list-item1 {
2521N/A background-color: red;
2521N/A }
2521N/A #demo .list-item2 {
4049N/A background-color: green;
2521N/A }
2521N/A #demo .list-item3 {
3998N/A background-color: blue;
4049N/A }
3998N/A #demo li.item {
3998N/A width: 150px;
3998N/A list-style-type: circle;
3998N/A }
2521N/A #demo div.item {
2892N/A height: 50px;
3998N/A float: left;
2892N/A width: 50px;
2892N/A }
2892N/A #demo .yui-dd-drop-over {
2892N/A border: 2px solid green;
3998N/A }
3998N/A #demo li.disabled {
3998N/A background-color: #aaa;
2892N/A }
2892N/A </style>
2892N/A</head>
2892N/A<body class="yui-skin-sam">
2892N/A<input type="button" value="Add <?php echo($count); ?> More Items" id="add"><br>
2892N/A
2892N/A<div id="demo">
2892N/A<ul id="one">
2892N/A<?php
2892N/Aforeach (range(1, $count) as $k) {
2892N/A echo(' <li class="item list-item1".(($k % 2) ? ' disabled" : '").'">".$k.'</li>"."\n");
3998N/A}
3998N/A?>
2892N/A</ul>
2892N/A<ul id="two">
2521N/A<?php
2521N/Aforeach (range(1, $count) as $k) {
2521N/A echo(' <li class="item list-item2"><strong>[|]</strong> ".$k.'</li>"."\n");
2521N/A}
2521N/A?>
2521N/A</ul>
2521N/A</div>
2521N/A
2521N/A<script type="text/javascript" src="../../build/yui/yui-debug.js?bust=<?php echo(mktime()); ?>"></script>
2521N/A
2521N/A
2521N/A<script type="text/javascript" src="../dd/js/ddm-base.js?bust=<?php echo(mktime()); ?>"></script>
2521N/A<script type="text/javascript" src="../dd/js/ddm.js?bust=<?php echo(mktime()); ?>"></script>
2521N/A<script type="text/javascript" src="../dd/js/ddm-drop.js?bust=<?php echo(mktime()); ?>"></script>
2521N/A<script type="text/javascript" src="../dd/js/drag.js?bust=<?php echo(mktime()); ?>"></script>
3998N/A<script type="text/javascript" src="../dd/js/drop.js?bust=<?php echo(mktime()); ?>"></script>
3998N/A<script type="text/javascript" src="../dd/js/proxy.js?bust=<?php echo(mktime()); ?>"></script>
2663N/A<script type="text/javascript" src="../dd/js/constrain.js?bust=<?php echo(mktime()); ?>"></script>
2521N/A<script type="text/javascript" src="../dd/js/dd-plugin.js?bust=<?php echo(mktime()); ?>"></script>
2521N/A<script type="text/javascript" src="../dd/js/dd-drop-plugin.js?bust=<?php echo(mktime()); ?>"></script>
2521N/A<script type="text/javascript" src="../dd/js/delegate.js?bust=<?php echo(mktime()); ?>"></script>
2521N/A
2521N/A<script type="text/javascript" src="js/sortable.js?bust=<?php echo(mktime()); ?>"></script>
2521N/A
2521N/A<script type="text/javascript">
2521N/Avar yConfig = {
2521N/A base: '../../build/',
2521N/A filter: 'DEBUG',
2521N/A allowRollup: false,
2521N/A logExclude: {
3998N/A 'YUI': true,
3998N/A Event: true,
2521N/A Base: true,
2521N/A Attribute: true,
2892N/A augment: true
2521N/A },
2521N/A throwFail: true,
3998N/A debug: false
2521N/A};
2521N/A
2521N/AYUI(yConfig).use('dd-ddm', 'dd-drag', 'dd-proxy', 'dd-drop', 'dd-delegate', 'dd-constrain', 'dd-drop-plugin', 'event-mouseenter', 'sortable', 'yui-throttle', function(Y) {
2521N/A //console.log(Y);
2521N/A
2521N/A //Y.DD.DDM._debugShim = true;
2521N/A
2521N/A var sel = new Y.Sortable({
3998N/A container: Y.one('#one'),
3998N/A nodes: '.item',
2521N/A opacity: '.5',
2521N/A moveType: 'move',
2521N/A invalid: '.disabled',
2521N/A opacityNode: 'currentNode'
2521N/A });
2521N/A sel.plug(Y.Plugin.DDConstrained, {
3998N/A constrain2node: '#demo'
3998N/A });
2521N/A
2521N/A //console.log('sel: ', sel.get('id'));
2521N/A
2521N/A
2521N/A
3998N/A var sel2 = new Y.Sortable({
2521N/A container: '#two',
2521N/A nodes: '.item',
2521N/A moveType: 'insert',
2521N/A handles: ['strong']
2521N/A });
2521N/A sel2.plug(Y.Plugin.DDConstrained, {
2521N/A constrain2node: '#demo'
2521N/A });
2521N/A //console.log('sel2: ', sel2.get('id'));
2521N/A
2521N/A //sel2.bindTo(sel);
2521N/A //sel2.bindWith(sel);
2521N/A
2521N/A sel.join(sel2, 'outer');
2521N/A
2521N/A //sel.destroy();
2521N/A
2521N/A /*
2521N/A console.log(Y.DD.DDM.getDelegate(Y.one('#three')));
2521N/A console.log(Y.DD.DDM.getDelegate('#one'));
2521N/A console.log(Y.DD.DDM.getDelegate('#two'));
2521N/A
2892N/A console.log(Y.Sortable.getSortable(Y.one('#three')));
2521N/A console.log(Y.Sortable.getSortable('#one'));
2521N/A console.log(Y.Sortable.getSortable('#two'));
2521N/A */
2521N/A
2892N/A var count = <?php echo($count); ?>,
2892N/A inc = 1;
2892N/A
2521N/A Y.one('#add').on('click', function(e) {
2521N/A var node, one = Y.one('#one'), two = Y.one('#two'), three = Y.one('#three');
2521N/A for (var i = 1; i < count + 1; i++) {
2521N/A node = Y.Node.create('<li class="item list-item1">(' + inc + ':1) ' + i + '</li>');
2521N/A one.append(node);
2521N/A two.append(node.cloneNode(true).set('innerHTML', '<strong>[|]</strong> (' + inc + ':2) ' + i).addClass('list-item2').removeClass('list-item1'));
2521N/A //three.append(node.cloneNode(true).set('innerHTML', '(' + inc + ':3) ' + i));
2521N/A }
2521N/A inc++;
2892N/A sel.sync();
2892N/A sel2.sync();
2892N/A //sel3.sync();
2892N/A });
2521N/A
2521N/A});
3998N/A
3998N/A</script>
3998N/A</body>
3998N/A</html>
2925N/A