ItemizeJS - Turn any container's children into manageable items.

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

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();
          

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

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
});
          

⚽️

🏀

🏈

🎱

Modal confirm, notification message.

Read the docs to know more about custom options.

Html

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
});
            
          

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

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);
});
            
          

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

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
});

            
          

ITEM 1

ITEM 2

ITEM 3