-
-
Save plugn/7b8b574c0df61fd080428072604c1d02 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; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <ul id="multi" class="tile__root" style="margin: 50px 20px;"> | |
| <li class="tile tile__name">group0 item1</li> | |
| <li class="tile tile__name">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; | |
| // console.log(descEl(drag)+ '\n -> ' + descEl(rel.parentNode)); | |
| if (drag.matches('.tile__folder') && !rel.parentNode.matches('.tile__root')) { | |
| return false; | |
| } | |
| // if (1) { | |
| // var pLs = drag.closest('.tile__list'); | |
| // console.log('^ .tile__list ', descEl(pLs)); | |
| // } | |
| } | |
| 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 | |
| }); | |
| }); | |
| } | |
| run(); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css"> | |
| .tile { | |
| margin: 10px 0; | |
| } | |
| .collapsed > ul { | |
| display: none; | |
| }</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; | |
| // console.log(descEl(drag)+ '\n -> ' + descEl(rel.parentNode)); | |
| if (drag.matches('.tile__folder') && !rel.parentNode.matches('.tile__root')) { | |
| return false; | |
| } | |
| // if (1) { | |
| // var pLs = drag.closest('.tile__list'); | |
| // console.log('^ .tile__list ', descEl(pLs)); | |
| // } | |
| } | |
| 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 | |
| }); | |
| }); | |
| } | |
| 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; | |
| } |
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; | |
| // console.log(descEl(drag)+ '\n -> ' + descEl(rel.parentNode)); | |
| if (drag.matches('.tile__folder') && !rel.parentNode.matches('.tile__root')) { | |
| return false; | |
| } | |
| // if (1) { | |
| // var pLs = drag.closest('.tile__list'); | |
| // console.log('^ .tile__list ', descEl(pLs)); | |
| // } | |
| } | |
| 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 | |
| }); | |
| }); | |
| } | |
| run(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment