Component library

Sort component

Last updated 2 November 2026

Creates reorderable drag-and-drop lists

Live demo

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
cloneOnDrag	boolean	false	true/false	Specifies that the dragged element will be copied to other sort group. Note: Only supports native HTML tags.
disabled	boolean	false	true/false	Disables the sorting
draggable	boolean/string	true	true/false/any	Defines if the child elements can be dragged/transfer into another sort group. Passing string will specify the sort group it can be transferred.
droppable	boolean	true	true/false/any	Specifies that other items from another sort group can be transferred inside. Passing string will specify the source group allowed to transfer.
ignoreElements	string	""	any	Defines the selectors that do not lead to dragging
wrapperClass	string	""	any	Defines the class of the parent container of the sortable elements

Events

EVENT	OBJECT	DESCRIPTION
insDragStart	detail	Element dragging started
insDragEnd	detail	Element dragging ended
insChoose	detail	Element is chosen
insAdd	detail	Element is dropped into the list from another list
insUpdate	detail	Changed sorting within list
insMove	detail	Event when you move an item in the list or between lists
insRemove	detail	Element is removed from the list into another list
insClone	detail	Called when creating a clone of element
insPositionChanged	detail	Called when dragging element changes position

Functions

FUNCTION	PARAMETER	RETURN	DESCRIPTION
arrange	array	n/a	Loads the sorting based on the data-sortable-id of the child elements
getSortOrder	n/a	object	Returns the data-sortable-id sorting in

Examples

Sort - v2 Complete Example 2

<ins-card 
  no-padding steady
  tooltip="This is a sample tooltip content. It also support html content.">

  <ins-sort 
    wrapper-class="sourcebox-wrapper" 
    id="source-box" 
    sort-group="insites-group-complete-example" 
    droppable="false" 
    sort="false">
 
     <ins-button 
        icon="icon-drag-indicator" 
        solid color="blue" 
        label="Draggable #1">
 
     </ins-button>

      <ins-button 
        icon="icon-drag-indicator" 
        solid color="green" 
        label="Draggable #2">
      </ins-button>

      <ins-button 
        icon="icon-drag-indicator" 
        solid color="red" 
        label="Draggable #3">

      </ins-button>

  </ins-sort>

</ins-card>

<ins-card steady>

  <ins-sort 
    id="destination-box" 
    sort-group="insites-group-complete-example" 
    droppable="true" 
    draggable="false" 
    ignore-elements="ins-input[disabled]">

    <ins-input 
      data-sortable-id="1" 
      label="Sortable Input" 
      icon="icon-more-vertical">
    </ins-input>
    
    <ins-input 
      data-sortable-id="2" 
      value="This is not selectable item" 
      Disabled>
    </ins-input>

    <ins-datepicker 
      data-sortable-id="3" 
      label="Sortable Date Picker" 
      icon="icon-more-vertical">
    </ins-datepicker>

  </ins-sort>

</ins-card>

Sort - v2 Complete Example 3

<script>
  var sourceBox = document.getElementById("source-box")
  sourceBox.addEventListener('onRemove', function (e) {
    alert("Item Transferred")
  });

  var destinationBox = document.getElementById("destination-box")
  destinationBox.addEventListener('didLoad', function(){
    destinationBox.arrange(["2", "1", "3"])
  });
</script>

Sort - v2 Complete Example 4

<style>
  .sourcebox-wrapper{
    display: flex;
    justify-content: space-around;
    padding: 10px;
  }
  .sourcebox-wrapper > * {
    flex: 0 0 auto !important;
  }
</style>

Default State

<ins-sort>

  <ins-card>

   <i class="icon-drag-indicator">
    </i> &emsp; Sortable Item #1

  </ins-card>

  <ins-card>

    <i class="icon-drag-indicator">
      </i> &emsp; Sortable Item #2
 
 </ins-card>

</ins-sort>

Direct Set Data

<ins-sort 
  id="sortElement">

  <ins-card 
     data-sortable-id="1">

    <i class="icon-drag-indicator">
      </i> &emsp; Sortable Item #1
 
  </ins-card>
 
   <ins-card 
  D ata-sortable-id="2">
 
     <i class="icon-drag-indicator">
      </i> &emsp; Sortable Item #2
 
  </ins-card>

  <ins-card 
    data-sortable-id="3">

    <i class="icon-drag-indicator">
      </i> &emsp; Sortable Item #3

  </ins-card>

</ins-sort>

<script>
  var order = ["3","2","1"]
  var sortElement = document.getElementById("sortElement");
  sortElement.addEventListener('didLoad', function(e){
    sortElement.arrange(order);
  });
</script>

Disabled State

<ins-sort 
  disabled>

  <ins-card>

   <i class="icon-drag-indicator">
    </i> &emsp; Sortable Item #1
   </ins-card>

  <ins-card>

   <i class="icon-drag-indicator">
    </i> &emsp; Sortable Item #2
   </ins-card>

</ins-sort>

Draggable and Droppable Specific

<style>
  .display-flex {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
  }

  .display-flex>* {
    flex-basis: 1 0 auto;
    margin: 0.5em;
  }
</style>

<div class="grid-x grid-margin-x">
 
 <div class="medium-6 cell">

    <ins-card steady>

      <ins-heading label="Draggable Only"></ins-heading>

      <ins-sort sort="false" droppable="false" wrapper-class="display-flex">

        <ins-tag 
          light="false" 
          icon="icon-drag-indicator" 
          label="Draggable Item #1" 
          color="blue">
        </ins-tag>
        
        <ins-tag 
          light="false" 
          icon="icon-drag-indicator" 
          label="Draggable Item #2" 
          color="green">
        </ins-tag>
        
        <ins-tag 
          light="false" 
          icon="icon-drag-indicator" 
          label="Draggable Item #3" 
          color="red">
        </ins-tag>
      
      </ins-sort>

    </ins-card>

  </div>

  <div class="medium-6 cell">

    <ins-card steady>

      <ins-heading 
        Label="Droppable Only">
      </ins-heading>

      <ins-sort draggable="false" wrapper-class="display-flex">
 
 
        <ins-tag 
          icon="icon-drag-indicator" 
          label="Sortable Item #1" 
          color="blue">
        </ins-tag>

        <ins-tag 
          icon="icon-drag-indicator" 
          label="Sortable Item #2" 
          color="green">
        </ins-tag>

        <ins-tag 
          icon="icon-drag-indicator" 
          label="Sortable Item #3" 
          color="red">
        </ins-tag>

      </ins-sort>

    </ins-card>

  </div>

</div>

Clone on Drag

<ins-card 
  steady>

  <ins-heading 
    label="Source">
 
 </ins-heading>

  <ins-card 
    Steady>

    <ins-sort 
      clone-on-drag 
      sort="false">
 
     <span>{{ title }}</span>
      <span>{{ author }}</span>
      <span>{{ content }}</span>
      <span>{{ created_at }}</span>
  
  </ins-sort>
 
 </ins-card>

</ins-card>

<ins-card steady>
  <ins-heading 
    label="Drop Items Below">
</ins-heading>
  <ins-card steady>
    <ins-sort draggable="false">

    </ins-sort>
  </ins-card>
</ins-card>