Insites Docs Web Components V1Data DisplaySort

Sort

Last updated on August 15, 2024.

Element: <ins-sort>

Creates re orderable drag-and-drop lists

Complete Example

Code Snippet

<ins-card no-padding steady>
  <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.load(["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 data-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.load(order);
  });
</script>
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>
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>

 

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
onDragStart detail Element dragging started
onDragEnd detail Element dragging ended
onChoose detail Element is chosen
onAdd detail Element is dropped into the list from another list
onUpdate detail Changed sorting within list
onMove detail Event when you move an item in the list or between lists
onRemoved detail Element is removed from the list into another list
onCloned detail Called when creating a clone of element
onPositionChanged detail Called when dragging element changes position

 

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.