Sort

Published on February 18, 2021, updated on June 01, 2021

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

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.