Skip to content

Instantly share code, notes, and snippets.

@manngo

manngo/dabblet.css

Last active December 23, 2020 04:03
Show Gist options
  • Save manngo/e88e769b1911fc694207888f3e52b9e1 to your computer and use it in GitHub Desktop.
Save manngo/e88e769b1911fc694207888f3e52b9e1 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
body {
font-family: sans-serif;
}
ul#tabs {
list-style-type: none;
display: flex;
flex-direction: row;
padding: 1em;
border: thin solid #ccc;
box-sizing: border-box;
}
ul#tabs>li {
border: thin solid #ccc;
padding: .5em;
box-sizing: border-box;
}
li[draggable] {
background-color: #f8f8f8;
cursor: move;
user-select: none;
}
ul#tabs>li.dragging {
border-color: red;
}
ul#tabs>li.dragover-before {
border-left: thick solid red;
}
ul#tabs>li.dragover-after {
border-right: thick solid green;
}
Raw
dabblet.html
<ul id="tabs">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
<li>Date</li>
<li>Elderberry</li>
</ul>
Raw
dabblet.js
var tabs=document.querySelectorAll('ul#tabs>li');
// tabs[3].previousElementSibling.insertAdjacentElement('beforebegin',tabs[3]);
doDrag(tabs);
function doDrag(elements) {
var element;
elements.forEach(e=>{draggable(e);});
function draggable(e) {
e.draggable=true;
e.addEventListener('dragstart',dragstart,false);
e.addEventListener('dragenter',dragenter,false);
e.addEventListener('dragover',dragover,false);
e.addEventListener('dragleave',dragleave,false);
e.addEventListener('drop',drop,false);
e.addEventListener('dragend',dragend,false);
}
function lolight(element) {
element.classList.remove('dragover-before');
element.classList.remove('dragover-after');
}
// Element
function dragstart(event) {
element=this;
event.dataTransfer.effectAllowed='move';
// event.dataTransfer.setData('text/html',this.outerHTML);
this.classList.add('dragging');
}
function drag(event) {
}
function dragend(event) {
lolight(this);
this.classList.remove('dragging');
}
// Target
function dragenter(event) {
}
function dragover(event) {
event.preventDefault();
event.dataTransfer.dropEffect='move';
var left=this.getBoundingClientRect().left;
var right=this.getBoundingClientRect().right;
if(event.clientX<(left+right)/2) {
this.classList.add('dragover-before');
this.classList.remove('dragover-after');
}
else {
this.classList.add('dragover-after');
this.classList.remove('dragover-before');
}
}
function dragleave(event) {
lolight(this);
}
function drop(event) {
event.stopPropagation();
if(element!=this) {
if(this.classList.contains('dragover-before')) {
this.insertAdjacentElement('beforebegin',element);
}
else if(this.classList.contains('dragover-after')) {
this.insertAdjacentElement('afterend',element);
}
}
lolight(this);
}
}
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment