Created
January 31, 2017 10:00
-
-
Save anonymous/ed049537bcbe66efc385ed8dce9c0356 to your computer and use it in GitHub Desktop.
SRBL // source http://jsbin.com/xunemih
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 tile__cross">group0 item1</li> | |
| <li class="tile tile__name tile__cross">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.tagName + (el.className ? '.' + el.className : ''); | |
| } | |
| 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) { | |
| console.log('ok') | |
| } | |
| // evt.dragged; // dragged HTMLElement | |
| // evt.draggedRect; // TextRectangle {left, top, right и bottom} | |
| // evt.related; // HTMLElement on which have guided | |
| // evt.relatedRect; // TextRectangle | |
| // originalEvent.clientY; // mouse position | |
| // return false; — for cancel | |
| } | |
| 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'); | |
| console.log('lists', listFn(lists, 'map', function(list) { | |
| return list.className; | |
| })); | |
| 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.tagName + (el.className ? '.' + el.className : ''); | |
| } | |
| 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) { | |
| console.log('ok') | |
| } | |
| // evt.dragged; // dragged HTMLElement | |
| // evt.draggedRect; // TextRectangle {left, top, right и bottom} | |
| // evt.related; // HTMLElement on which have guided | |
| // evt.relatedRect; // TextRectangle | |
| // originalEvent.clientY; // mouse position | |
| // return false; — for cancel | |
| } | |
| 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'); | |
| console.log('lists', listFn(lists, 'map', function(list) { | |
| return list.className; | |
| })); | |
| 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.tagName + (el.className ? '.' + el.className : ''); | |
| } | |
| 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) { | |
| console.log('ok') | |
| } | |
| // evt.dragged; // dragged HTMLElement | |
| // evt.draggedRect; // TextRectangle {left, top, right и bottom} | |
| // evt.related; // HTMLElement on which have guided | |
| // evt.relatedRect; // TextRectangle | |
| // originalEvent.clientY; // mouse position | |
| // return false; — for cancel | |
| } | |
| 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'); | |
| console.log('lists', listFn(lists, 'map', function(list) { | |
| return list.className; | |
| })); | |
| 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