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

Revisions

  1. manngo revised this gist Dec 23, 2020. 2 changed files with 76 additions and 24 deletions.
    98 changes: 75 additions & 23 deletions dabblet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,24 +1,76 @@
    document.querySelectorAll('span.handle').forEach(span=>{
    doStretch(span)
    });
    var Rearrangeable=function(direction='h',className='dragover') {
    var element;
    this.add=function(e) {
    e.draggable=true;

    function doStretch(span) {
    span.addEventListener('mousedown',stretch);
    var previous=span.previousElementSibling;
    var next=span.nextElementSibling;
    function stretch(event) {
    var width=parseInt(getComputedStyle(previous).width);
    var x=event.clientX;
    document.addEventListener('mousemove',goHorizontal);
    document.addEventListener('mouseup',stop);
    function goHorizontal(event) {
    previous.style.width=width+event.clientX-x+'px';
    previous.style.pointerEvents=next.style.pointerEvents='none';
    }
    function stop(event) {
    document.removeEventListener('mousemove',goHorizontal);
    document.removeEventListener('mouseup',stop);
    previous.style.pointerEvents=next.style.pointerEvents='auto';
    }
    }
    }
    e.addEventListener('dragstart',this.dragstart.bind(this),false);
    e.addEventListener('dragenter',this.dragenter.bind(this),false);
    e.addEventListener('dragover',this.dragover.bind(this),false);
    e.addEventListener('dragleave',this.dragleave.bind(this),false);
    e.addEventListener('drop',this.drop.bind(this),false);
    e.addEventListener('dragend',this.dragend.bind(this),false);
    };
    this.highlight=function(element,which) {
    if(which=='before') element.classList.add(`${className}-before`);
    else element.classList.remove(`${className}-before`);
    if(which=='after') element.classList.add(`${className}-after`);
    else element.classList.remove(`${className}-after`);
    };

    // Element
    this.dragstart=function(event) {
    var target=event.currentTarget;
    this.element=target;
    event.dataTransfer.effectAllowed='move';
    // event.dataTransfer.setData('text/html',this.outerHTML);
    target.classList.add(`${className}-start`);
    };
    this.drag=function(event) {
    var target=event.currentTarget;
    };
    this.dragend=function(event) {
    var target=event.currentTarget;
    this.highlight(target);
    target.classList.remove(`${className}-start`);
    };

    // Target
    this.dragenter=function(event) {
    var target=event.currentTarget;
    };
    this.dragover=function(event) {
    var target=event.currentTarget;
    event.preventDefault();
    event.dataTransfer.dropEffect='move';
    if(direction=='v') {
    if(event.clientY<(target.getBoundingClientRect().top+target.getBoundingClientRect().bottom)/2) this.highlight(turrentTarget,'before');
    else this.highlight(target,'after');
    }
    else {
    if(event.clientX<(target.getBoundingClientRect().left+target.getBoundingClientRect().right)/2) this.highlight(target,'before');
    else this.highlight(target,'after');
    }
    };
    this.dragleave=function(event) {
    var target=event.currentTarget;
    // if(target)
    this.highlight(target);
    };
    this.drop=function(event) {
    var target=event.currentTarget;
    event.stopPropagation();
    if(this.element!=target) {
    if(target.classList.contains(`${className}-before`)) {
    target.insertAdjacentElement('beforebegin',this.element);
    }
    else if(target.classList.contains(`${className}-after`)) {
    target.insertAdjacentElement('afterend',this.element);
    }
    }
    this.highlight(target);
    };
    };

    var dragGroup=new Rearrangeable();
    var tabs=document.querySelectorAll('ul#tabs>li');
    tabs.forEach(tab=>{dragGroup.add(tab);});
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"","page":"css"}
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"","page":"javascript"}
  2. manngo revised this gist Dec 23, 2020. 2 changed files with 23 additions and 76 deletions.
    3 changes: 0 additions & 3 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,3 @@
    /**
    * Draggable List Items
    */
    body {
    font-family: sans-serif;
    }
    96 changes: 23 additions & 73 deletions dabblet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,74 +1,24 @@
    var Rearrangeable=function(direction='h',className='dragover') {
    var element;
    this.add=function(e) {
    e.draggable=true;
    document.querySelectorAll('span.handle').forEach(span=>{
    doStretch(span)
    });

    e.addEventListener('dragstart',this.dragstart.bind(this),false);
    e.addEventListener('dragenter',this.dragenter.bind(this),false);
    e.addEventListener('dragover',this.dragover.bind(this),false);
    e.addEventListener('dragleave',this.dragleave.bind(this),false);
    e.addEventListener('drop',this.drop.bind(this),false);
    e.addEventListener('dragend',this.dragend.bind(this),false);
    };

    this.highlight=function(element,which) {
    if(which=='before') element.classList.add(`${className}-before`);
    else element.classList.remove(`${className}-before`);
    if(which=='after') element.classList.add(`${className}-after`);
    else element.classList.remove(`${className}-after`);
    };

    // Element
    this.dragstart=function(event) {
    this.element=event.target;
    event.dataTransfer.effectAllowed='move';
    // event.dataTransfer.setData('text/html',this.outerHTML);
    event.target.classList.add(`${className}-start`);
    };
    this.drag=function(event) {

    };
    this.dragend=function(event) {
    console.log('32: dragend')
    this.highlight(event.target);
    event.target.classList.remove(`${className}-start`);
    };

    // Target
    this.dragenter=function(event) {

    };
    this.dragover=function(event) {
    event.preventDefault();
    event.dataTransfer.dropEffect='move';
    // console.log('44')
    if(direction=='v') {
    if(event.clientY<(event.target.getBoundingClientRect().top+event.target.getBoundingClientRect().bottom)/2) this.highlight(event.target,'before');
    else this.highlight(event.target,'after');
    }
    else {
    if(event.clientX<(event.target.getBoundingClientRect().left+event.target.getBoundingClientRect().right)/2) this.highlight(event.target,'before');
    else this.highlight(event.target,'after');
    }
    };
    this.dragleave=function(event) {
    console.log(`55 ${q}`)
    this.highlight(event.target);
    };
    this.drop=function(event) {
    event.stopPropagation();
    console.log(`59`)
    if(this.element!=event.target) {
    if(event.target.classList.contains(`${className}-before`)) {
    event.target.insertAdjacentElement('beforebegin',element);
    }
    else if(event.target.classList.contains(`${className}-after`)) {
    event.target.insertAdjacentElement('afterend',element);
    }
    }
    this.highlight(event.target);
    };
    };
    var dragGroup=new Rearrangeable();
    var tabs=document.querySelectorAll('ul#tabs>li');
    tabs.forEach(tab=>{dragGroup.add(tab);});
    function doStretch(span) {
    span.addEventListener('mousedown',stretch);
    var previous=span.previousElementSibling;
    var next=span.nextElementSibling;
    function stretch(event) {
    var width=parseInt(getComputedStyle(previous).width);
    var x=event.clientX;
    document.addEventListener('mousemove',goHorizontal);
    document.addEventListener('mouseup',stop);
    function goHorizontal(event) {
    previous.style.width=width+event.clientX-x+'px';
    previous.style.pointerEvents=next.style.pointerEvents='none';
    }
    function stop(event) {
    document.removeEventListener('mousemove',goHorizontal);
    document.removeEventListener('mouseup',stop);
    previous.style.pointerEvents=next.style.pointerEvents='auto';
    }
    }
    }
  3. manngo revised this gist Dec 22, 2020. 2 changed files with 67 additions and 66 deletions.
    131 changes: 66 additions & 65 deletions dabblet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,73 +1,74 @@
    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);
    }
    var Rearrangeable=function(direction='h',className='dragover') {
    var element;
    this.add=function(e) {
    e.draggable=true;

    function lolight(element) {
    element.classList.remove('dragover-before');
    element.classList.remove('dragover-after');
    }
    e.addEventListener('dragstart',this.dragstart.bind(this),false);
    e.addEventListener('dragenter',this.dragenter.bind(this),false);
    e.addEventListener('dragover',this.dragover.bind(this),false);
    e.addEventListener('dragleave',this.dragleave.bind(this),false);
    e.addEventListener('drop',this.drop.bind(this),false);
    e.addEventListener('dragend',this.dragend.bind(this),false);
    };

    // Element
    function dragstart(event) {
    element=this;
    event.dataTransfer.effectAllowed='move';
    // event.dataTransfer.setData('text/html',this.outerHTML);
    this.classList.add('dragging');
    }
    function drag(event) {
    this.highlight=function(element,which) {
    if(which=='before') element.classList.add(`${className}-before`);
    else element.classList.remove(`${className}-before`);
    if(which=='after') element.classList.add(`${className}-after`);
    else element.classList.remove(`${className}-after`);
    };

    }
    function dragend(event) {
    lolight(this);
    this.classList.remove('dragging');
    }
    // Element
    this.dragstart=function(event) {
    this.element=event.target;
    event.dataTransfer.effectAllowed='move';
    // event.dataTransfer.setData('text/html',this.outerHTML);
    event.target.classList.add(`${className}-start`);
    };
    this.drag=function(event) {

    // Target
    };
    this.dragend=function(event) {
    console.log('32: dragend')
    this.highlight(event.target);
    event.target.classList.remove(`${className}-start`);
    };

    function dragenter(event) {
    // Target
    this.dragenter=function(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);
    };
    this.dragover=function(event) {
    event.preventDefault();
    event.dataTransfer.dropEffect='move';
    // console.log('44')
    if(direction=='v') {
    if(event.clientY<(event.target.getBoundingClientRect().top+event.target.getBoundingClientRect().bottom)/2) this.highlight(event.target,'before');
    else this.highlight(event.target,'after');
    }
    else if(this.classList.contains('dragover-after')) {
    this.insertAdjacentElement('afterend',element);
    else {
    if(event.clientX<(event.target.getBoundingClientRect().left+event.target.getBoundingClientRect().right)/2) this.highlight(event.target,'before');
    else this.highlight(event.target,'after');
    }
    }
    lolight(this);
    }
    }
    };
    this.dragleave=function(event) {
    console.log(`55 ${q}`)
    this.highlight(event.target);
    };
    this.drop=function(event) {
    event.stopPropagation();
    console.log(`59`)
    if(this.element!=event.target) {
    if(event.target.classList.contains(`${className}-before`)) {
    event.target.insertAdjacentElement('beforebegin',element);
    }
    else if(event.target.classList.contains(`${className}-after`)) {
    event.target.insertAdjacentElement('afterend',element);
    }
    }
    this.highlight(event.target);
    };
    };
    var dragGroup=new Rearrangeable();
    var tabs=document.querySelectorAll('ul#tabs>li');
    tabs.forEach(tab=>{dragGroup.add(tab);});
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"","page":"css"}
  4. manngo revised this gist Dec 22, 2020. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    /**
    * The first commented line is your dabblet’s title
    * Draggable List Items
    */
    body {
    font-family: sans-serif;
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
  5. manngo created this gist Dec 22, 2020.
    33 changes: 33 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    /**
    * 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;
    }
    7 changes: 7 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    <ul id="tabs">
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
    <li>Date</li>
    <li>Elderberry</li>
    </ul>
    73 changes: 73 additions & 0 deletions dabblet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,73 @@
    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);
    }
    }
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}