-
-
Save plugn/fb5d6a2f1ec669cb562efb05cdd80541 to your computer and use it in GitHub Desktop.
SRBL // source http://jsbin.com/mibiku
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>SRBL</title> | |
| <script src="http://rubaxa.github.io/Sortable/Sortable.js"></script> | |
| <style id="jsbin-css"> | |
| .tile { | |
| margin: 10px 0; | |
| } | |
| .collapsed > ul { | |
| display: none; | |
| } | |
| .tile__folder { | |
| min-height: 30px; | |
| background: aliceblue; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <ul id="multi" class="tile__root" style="margin: 50px 20px;"> | |
| <li class="">group0 item1</li> | |
| <li class="">group0 item2</li> | |
| <li class="tile tile__folder"> | |
| <span class="tile__name">[ Group A ]</span> | |
| <ul class="tile__list"> | |
| <li>groupA item1</li> | |
| <li>groupA item2</li> | |
| <li>groupA item3</li> | |
| </ul> | |
| </li> | |
| <li class="tile tile__folder"> | |
| <span class="tile__name">[ Group B ]</span> | |
| <ul class="tile__list"> | |
| <li>group B item1</li> | |
| <li>group B item2</li> | |
| <li>group B item3</li> | |
| </ul> | |
| </li> | |
| <li class="tile tile__folder"> | |
| <span class="tile__name">[ Group C ]</span> | |
| <ul class="tile__list"> | |
| <li>group C item1</li> | |
| <li>group C item2</li> | |
| </ul> | |
| </li> | |
| </ul> | |
| <script id="jsbin-javascript"> | |
| function byId (id) { | |
| return document.getElementById(id); | |
| } | |
| function byQS (qs) { | |
| return document.querySelectorAll(qs); | |
| } | |
| function listFn (nodeList, fn, callback) { | |
| return Array.prototype[fn].call(nodeList, callback) | |
| } | |
| function descEl(el) { | |
| return el && (el.tagName + (el.className ? '.' + el.className : '')) || el; | |
| } | |
| function onMove( /**Event*/ evt, /**Event*/ originalEvent) { | |
| var drag = evt.dragged, | |
| rel = evt.related; | |
| if (drag.matches('.tile__folder') && !rel.parentNode.matches('.tile__root')) { | |
| return false; | |
| } | |
| console.log('$'+descEl(drag) +'\n -> '+ descEl(rel.parentNode)); | |
| } | |
| function run() { | |
| listFn(byQS('.tile__folder'), 'forEach', function(f) { | |
| f.addEventListener('click', function(e){ | |
| // console.log('clicked', descEl(e.target.closest('.tile__folder'))); | |
| e.target.closest('.tile__folder').classList.toggle('collapsed'); | |
| }); | |
| }); | |
| // Multi groups | |
| Sortable.create(byId('multi'), { | |
| animation: 150, | |
| draggable: '.tile', | |
| handle: '.tile__name', | |
| onMove: onMove, | |
| group: 'photo' | |
| }); | |
| var lists = byQS('#multi .tile__list'); | |
| listFn(lists, 'forEach', function(el) { | |
| Sortable.create(el, { | |
| group: 'photo', | |
| onMove: onMove, | |
| animation: 150 | |
| }); | |
| }); | |
| listFn(byQS('#multi'), 'forEach', function(el) { | |
| Sortable.create(el, { | |
| group: 'photo', | |
| draggable: 'li', | |
| onMove: onMove, | |
| animation: 150 | |
| }); | |
| }); | |
| } | |
| run(); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css"> | |
| .tile { | |
| margin: 10px 0; | |
| } | |
| .collapsed > ul { | |
| display: none; | |
| } | |
| .tile__folder { | |
| min-height: 30px; | |
| background: aliceblue; | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">function byId (id) { | |
| return document.getElementById(id); | |
| } | |
| function byQS (qs) { | |
| return document.querySelectorAll(qs); | |
| } | |
| function listFn (nodeList, fn, callback) { | |
| return Array.prototype[fn].call(nodeList, callback) | |
| } | |
| function descEl(el) { | |
| return el && (el.tagName + (el.className ? '.' + el.className : '')) || el; | |
| } | |
| function onMove( /**Event*/ evt, /**Event*/ originalEvent) { | |
| var drag = evt.dragged, | |
| rel = evt.related; | |
| if (drag.matches('.tile__folder') && !rel.parentNode.matches('.tile__root')) { | |
| return false; | |
| } | |
| console.log('$'+descEl(drag) +'\n -> '+ descEl(rel.parentNode)); | |
| } | |
| function run() { | |
| listFn(byQS('.tile__folder'), 'forEach', function(f) { | |
| f.addEventListener('click', function(e){ | |
| // console.log('clicked', descEl(e.target.closest('.tile__folder'))); | |
| e.target.closest('.tile__folder').classList.toggle('collapsed'); | |
| }); | |
| }); | |
| // Multi groups | |
| Sortable.create(byId('multi'), { | |
| animation: 150, | |
| draggable: '.tile', | |
| handle: '.tile__name', | |
| onMove: onMove, | |
| group: 'photo' | |
| }); | |
| var lists = byQS('#multi .tile__list'); | |
| listFn(lists, 'forEach', function(el) { | |
| Sortable.create(el, { | |
| group: 'photo', | |
| onMove: onMove, | |
| animation: 150 | |
| }); | |
| }); | |
| listFn(byQS('#multi'), 'forEach', function(el) { | |
| Sortable.create(el, { | |
| group: 'photo', | |
| draggable: 'li', | |
| onMove: onMove, | |
| animation: 150 | |
| }); | |
| }); | |
| } | |
| run();</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .tile { | |
| margin: 10px 0; | |
| } | |
| .collapsed > ul { | |
| display: none; | |
| } | |
| .tile__folder { | |
| min-height: 30px; | |
| background: aliceblue; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function byId (id) { | |
| return document.getElementById(id); | |
| } | |
| function byQS (qs) { | |
| return document.querySelectorAll(qs); | |
| } | |
| function listFn (nodeList, fn, callback) { | |
| return Array.prototype[fn].call(nodeList, callback) | |
| } | |
| function descEl(el) { | |
| return el && (el.tagName + (el.className ? '.' + el.className : '')) || el; | |
| } | |
| function onMove( /**Event*/ evt, /**Event*/ originalEvent) { | |
| var drag = evt.dragged, | |
| rel = evt.related; | |
| if (drag.matches('.tile__folder') && !rel.parentNode.matches('.tile__root')) { | |
| return false; | |
| } | |
| console.log('$'+descEl(drag) +'\n -> '+ descEl(rel.parentNode)); | |
| } | |
| function run() { | |
| listFn(byQS('.tile__folder'), 'forEach', function(f) { | |
| f.addEventListener('click', function(e){ | |
| // console.log('clicked', descEl(e.target.closest('.tile__folder'))); | |
| e.target.closest('.tile__folder').classList.toggle('collapsed'); | |
| }); | |
| }); | |
| // Multi groups | |
| Sortable.create(byId('multi'), { | |
| animation: 150, | |
| draggable: '.tile', | |
| handle: '.tile__name', | |
| onMove: onMove, | |
| group: 'photo' | |
| }); | |
| var lists = byQS('#multi .tile__list'); | |
| listFn(lists, 'forEach', function(el) { | |
| Sortable.create(el, { | |
| group: 'photo', | |
| onMove: onMove, | |
| animation: 150 | |
| }); | |
| }); | |
| listFn(byQS('#multi'), 'forEach', function(el) { | |
| Sortable.create(el, { | |
| group: 'photo', | |
| draggable: 'li', | |
| onMove: onMove, | |
| animation: 150 | |
| }); | |
| }); | |
| } | |
| run(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment