Insites Docs Web Components V2Data DisplaySort

Sort

Last updated on August 01, 2025.

Element: <ins-sort>

Creates reorderable drag-and-drop lists

Complete Example

Code Snippet

<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>

Code Snippet

<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>

Code Snippet

<style>
  .sourcebox-wrapper{
    display: flex;
    justify-content: space-around;
    padding: 10px;
  }
  .sourcebox-wrapper > * {
    flex: 0 0 auto !important;
  }
</style>
Default State
  Sortable Item #1   Sortable Item #2

Code Snippet

<ins-sort>

  <ins-card>

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

  </ins-card>

  <ins-card>

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

</ins-sort>
Direct Set Data
  Sortable Item #1   Sortable Item #2   Sortable Item #3

Code Snippet

<ins-sort 
  id="sortElement">

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

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

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

    <i class="icon-drag-indicator">
      </i>   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
  Sortable Item #1   Sortable Item #2

Code Snippet

<ins-sort 
  disabled>

  <ins-card>

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

  <ins-card>

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

</ins-sort>
Draggable and Droppable Specific

Code Snippet

<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
{{ title }} {{ author }} {{ content }} {{ created_at }}

Code Snippet

<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>

 

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

 

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.