JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div class="dragdown">
  <div class="picked">
    item 1
  </div>
  
  <div class="list">
    <div class="hightlight">item 1</div>
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
    <div class="item">item 4</div>
    <div class="item">item 5</div>
  </div>
  
</div>

SCSS

$itemHeight: 50px;
$itemWidth: 200px;
$itemPadding: 0 10px;

$ddBorderColor: silver;
$listBorderColor: silver;
$listBg: white;
$hightlightBg: blue;
$hightlightColor: white;


.dragdown{
  position: relative;
  width: $itemWidth;
  height: $itemHeight;
  border: solid 1px $ddBorderColor;
  line-height: $itemHeight;
  
  user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
  
  .picked{
    height: $itemHeight;
    padding: $itemPadding;
  }
  
  &:not(.drag-started){
    .list{
      display: none;
    }
  }
  
  .list{
    position: absolute;
    top: 0;
    width: 100%;
    border: solid 1px $listBorderColor;
    background: $listBg;
    
    .item{
      height: $itemHeight;
      width: 100%;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      padding: $itemPadding;
    }
    
    .hightlight{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      background: $hightlightBg;
      height: $itemHeight;
      padding: $itemPadding;
      color: $hightlightColor;
    }
  }
}





body{
  height: 100%;
}

.dragdown {
  margin: 200px auto;
}

Babel + JSX

function isFnBool(fn){
  return fn instanceof Function;
}

function isFn(fn){
  if(isFnBool(fn)){
    return fn;
  } else {
    return function(){
      return false;
    };
  }
}

function loop(arr, eachDo, callback){
  var _t = arr,
      size = _t.length;

  function _do(i){
    if(i != _t.length){
      var item = _t[i];
      if(isFn(eachDo)){
        eachDo(item, i);
      }
    } else {
      isFn(callback)(_t);
    }
  }


  if(size){
    for(var i=0; i<size+1; i++){
      _do(i);
    }
  } else {
		isFn(callback)(_t);
  }

  return arr;
}


Array.prototype.loop = function(eachDo, callback){
  return loop(this, eachDo, callback);
};

NodeList.prototype.loop = function(eachDo, callback){
  return loop(this, eachDo, callback);
};


Element.prototype.q = function(selector, _notSafeQuery) {
  return this.querySelector(selector, _notSafeQuery);
};

Element.prototype.qa = function(selector){
  return this.querySelectorAll(selector);
};

Element.prototype.hasClass = function(className){
  var reg = new RegExp('(^|\\s)'+className+'(\\s|$)', 'gm');
  return reg.test(this.className);
};

Element.prototype.addClass = function(classNames, callback){
  var _t = this;
  classNames.split(' ').loop(function(className){
    if(!_t.hasClass(className)){
      _t.className += ' ' + className;
      _t.className = _t.className.replace(/\s+/g, " ").trim();
    }
  }, function(){
    isFn(callback)(_t);
  });

  return _t;
};

Element.prototype.removeClass = function(classNames, callback){
  var _t = this;

  classNames.split(' ').loop(function(className){
    var reg = new RegExp('([^-_]|^)'+className+'([^-_]|$)', 'gm');

    _t.className = _t.className.replace(reg, ' ').replace(/\s+/g, " ");
    _t.className = _t.className.replace(/\s+/g, " ").trim();
  }, function(){
		isFn(callback)(_t);
  });

  return _t;
};






class Dragdown {
  constructor(selector, selected){
  	this.wrapper = document.querySelector(selector);
    
    this.selected = selected;
    this.list =...