mouse
Itemize
J
S

Turn any container's children
into manageable items

Created by Kosmoon
ItemizeJS is a Javascript library which transforms any container’s children into manageable items in just two lines of code.
Basic usage.
Without specifying a target, the "apply" function will target any elements which has the "itemize" attribute.
Click the cross to remove an item.
html icon Html
javascript icon Javascript

<div itemize class="container">
  <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>
<style>
  .item {
    padding: 15px;
    border: solid 1px black;
    margin-bottom: 7px;
    background-color: #c8c7c7;
    box-shadow: 0 5px 10px -2px rgba(0, 0, 0, .4);
  } 
</style>

var itemManager = new Itemize();

itemManager.apply();
refresh icon
ITEM 1
ITEM 2
ITEM 3
ITEM 4
Sorting (Drag and drop).
Drag and drop an item to a new spot, and the other items will reorganize themselves.
html icon Html
javascript icon Javascript

<div class="container">
  <div class="item red">⚽️</div>
  <div class="item green">🏀</div>
  <div class="item yellow">🏈</div>
  <div class="item blue">🎱</div>
</div>
<style>
  .item {
    width: 50%;
    padding: 10px;
    border: solid 1px black;
    margin: 0 auto 15px auto;
    color: white;
    box-shadow: 0 5px 10px -2px rgba(0, 0, 0, .4);
  }
  .red {
    background-color: #c0392b
  }
  .green {
      background-color: #16a085
  }
  .yellow {
      background-color: #f39c12
  }
  .blue {
      background-color: #2980b9
  }
</style>

var itemManager = new Itemize();

itemManager.apply('container', {
  dragAndDrop: true
});
refresh icon
⚽️
🏀
🏈
🎱
Modal confirm, notification message.
Read the docs to know more about custom options.
html icon Html
javascript icon Javascript

<div class="container">
  <div class="cat">
    <img src="cat1.jpeg">
  </div>
  <div class="cat">
    <img src="cat2.jpeg">
  </div>
  <div class="cat">
    <img src="cat3.jpeg">
  </div>
  <div class="cat">
    <img src="cat4.jpeg">
  </div>

<style>
  .cat {
    margin: 4px
  } 
</style>

var itemManager = new Itemize();

itemManager.apply('.container', { 
  modalConfirm: true,
  modalText: 'Remove this image?',
  showRemoveNotifications: true,
  removeNotificationText: 'Cat image removed',
  notificationPosition: 'bottom-center',
  removeBtnPosition: 'top-left',
  removeBtnBgColor: "#ffffff",
  dragAndDrop: true
});
            
refresh icon
Adding items.
Targeted containers will automatically itemize and animate newly added elements.
You can disable this globally by setting the "itemizeAddedElement" option to "false", or for a single element with the attribute "notItemize".
html icon Html
javascript icon Javascript

<div itemize class="container">
  <button notItemize class="add_btn">
    Add DOM element
  </button>
  <div class="item">ITEM</div>
  <div class="item">ITEM</div>
</div>

<style>
  .item {
    display: inline-block;
    float: left;
    width: 100px;
    padding: 15px;
    border: solid 1px black;
    margin: 4px;
    background-color: #e9e9e9;
    text-align: center;
  } 
</style>

var itemManager = new Itemize();

itemManager.apply({
  showAddNotifications: true,
  dragAndDrop: true
});

var btn = document.querySelector(".add_btn");
var container = document.querySelector(".container");

btn.addEventListener("click", function() {
  var newElement = document.createElement("div");
  newElement.classList.add("item");
  newElement.textContent = "ITEM";
  container.appendChild(newElement);
});
            
refresh icon
ITEM
ITEM
Custom remove button and custom animation.
You can replace the default cross with your own button with the option: "removeBtnClass". Several options can control the animation, here is a few:
html icon Html
javascript icon Javascript

<div itemize class="container">
  <div>
    ITEM 1
    <button class="rm_btn">
      Remove me
    </button>
  </div>
  <div>
    ITEM 2
    <button class="rm_btn">
      Remove me
    </button>
  </div>
  <div>
    ITEM 3
    <button class="rm_btn">
      Remove me
    </button>
  </div>
</div>

<style>
  .container div {
    padding: 10px;
    margin: 4px;
    width: 29%;
    border: solid 1px black;
    background-color: #e9e9e9;
    text-align: center;
  } 
</style>

var itemManager = new Itemize();

itemManager.apply({
  removeBtnClass: "rm_btn",
  animDuration: 1000,
  animRemoveTranslateX: 200,
  animRemoveTranslateY: 100
});

            
refresh icon
ITEM 1
ITEM 2
ITEM 3