JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
<ul uk-tab>
    <li class="uk-active"><a href="#">Settings</a></li>
</ul>

<div class="uk-padding-small">
<span class="uk-h5">
  Available vehicle columns
</span>

<br>
<br>
<ul class="list-available-columns" uk-grid>
    
</ul>

<hr>

<span class="uk-h5">
  Copy vehicle columns
</span>

<br>
<br>

<ul class="list-used-columns" uk-sortable="handle: .uk-card" uk-grid>
    
</ul>
</div>

CSS

.uk-grid{
  margin-left: 0;
}

.uk-grid>*{
  padding-left: 20px
}

.uk-grid>*:first-of-type{
  padding-left: 0;
}

.uk-card-tiny {
  height: 45px;
  padding: 10px;
  line-height: 25px;
  box-sizing: border-box;
  /* width: 100px; */
}

JavaScript

const usedColumns = [];

const allClolumns = [
{
	name: 'Stock #',
  slug: 'stock_#',
},
{
  name: "Auction Date and Time",
  slug: "sale_date"
},
{
  name: "Odometer",
  slug: "odometer"
},
{
  name: "Lane/Item #",
  slug: "run_#"
},
{
  name: "Title/Sale Doc",
  slug: "sale_doc"
},
{
  name: "Seller",
  slug: "seller"
},
{
  name: "Start Code",
  slug: "start_code"
},
{
  name: "Vehicle Name",
  slug: "full_name"
},
{
  name: "Vehicle Link",
  slug: "url"
},
{
  name: "Current Bid",
  slug: "current_bid"
},
{
  name: "Buy Now",
  slug: "buy_now"
},
{
  name: "Preview Image",
  slug: "preview_img"
},
];



const renderAvailableColumns = () => {
	$('.list-available-columns > *').remove();
  
	allClolumns.filter(c => usedColumns.indexOf(c.slug) === -1).map(c => {
  	const $column = $(`<li> <div class="uk-card uk-card-default uk-card-hover uk-card-body uk-text-center uk-card-tiny" data-slug="${c.slug}"><i uk-icon="plus" ratio='0.7'></i> ${c.name}</div> </li>`);
    $('.list-available-columns').append($column);
  });
};

const renderUsedColumns = () => {
	$('.list-used-columns > *').remove();

	allClolumns.filter(c => usedColumns.indexOf(c.slug) !== -1).map(c => {
  	const $column = $(`<li><div class="uk-card uk-card-default uk-card-body uk-text-center uk-card-tiny uk-card-primary" data-slug="${c.slug}">${c.name}<button type="button" uk-close></button></div></li>`);
    $('.list-used-columns').append($column);
  });
};

const attachEvents = () => {
  $('.list-available-columns .uk-card').on('click', function(){
    const $column = $(this)
    const slug = $column.attr('data-slug');

    addUsedColumn(slug);
  });

  $('.list-used-columns .uk-card *[uk-close]').on('click', function(){
    const $column = $(this).parent();
    const slug = $column.attr('data-slug');

    removeUsedColumn(slug);
  });
};

const draw = () => {
	renderAvailableColumns();
	renderUsedColumns();
  attachEvents();
};


const addUsedColumn = slug => {
	usedColumns.push(slug);
 ...