Vue UI Components Documentation

Defines where the helper that moves with the mouse is being appended to during the drag (for example, to resolve overlap/zIndex issues).

<template>
  <JqxSortable ref="mySortable"
    :appendTo="'document.body'">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

If defined, the items can be dragged only horizontally or vertically.

'x'

'y'

<template>
  <JqxSortable ref="mySortable"
    :axis="'y'">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

Prevents sorting if you start on elements matching the selector.

<template>
  <JqxSortable ref="mySortable"
    :cancel="'.not-sortable-item'">
    <div class="not-sortable-item">1</div>
    <div class="sortable-item">2</div>
    <div class="sortable-item">3</div>
    <div class="sortable-item">4</div>
    <div class="sortable-item">5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    }
  } 
</script>
 
<style> 
  .jqx-sortable div {
    margin: 1px; 
    background-color: lightblue; 
    text-align: center; 
    font-size: 20px; 
    width: 100px; 
    height: 30px; 
  }
</style>

A selector of other sortable elements that the items from this list should be connected to.

<template>
  <div>
    <JqxSortable ref="mySortable1" :autoCreate="false"></JqxSortable>
    <JqxSortable ref="mySortable2" :autoCreate="false"></JqxSortable>
  </div> 
</template> 
<script> 
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue'; 
  export default { 
    components: { 
      JqxSortable 
    }, 
    data: function () { 
      return { 
        options: { connectWith: '.sortable', opacity: 0.5 },
        firstNames: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert', 'Laura', 'Anne'],
        lastNames: ['Davolio', 'Fuller', 'Leverling', 'Peacock', 'Buchanan', 'Suyama', 'King', 'Callahan', 'Dodsworth'],
      }
    },
    mounted: function () {
      this.loadInfo();
      this.$refs.mySortable1.createComponent(this.options);
      this.$refs.mySortable2.createComponent(this.options);
    },
    methods: {
      loadInfo: function () {
        let sortableList1 = ''; 
        let sortableList2 = ''; 
        const firstNamesHalf = Math.floor(this.firstNames.length / 2);
        for (let i = 0; i < this.firstNames.length; i++) { 
          const element = '<div>' + this.firstNames[i] + ' ' + this.lastNames[i] + '</div>';
          if (i < firstNamesHalf) {
            sortableList1 = sortableList1 + element; 
          } else {
            sortableList2 = sortableList2 + element; 
          }
        }
        const mySortable1 = this.$refs.mySortable1.$el;
        const mySortable2 = this.$refs.mySortable2.$el;
        mySortable1.classList.add('sortable');
        mySortable2.classList.add('sortable');
        mySortable1.innerHTML = sortableList1;
        mySortable2.innerHTML = sortableList2;
      }
    }
  } 
</script> 
<style>
  .jqx-sortable {
    margin: 2px; 
    padding: 5px; 
    float: left; 
    width: 200px; 
    border: lightblue solid 1px; 
    margin-right: 30px; 
  } 
  .jqx-sortable div { 
    border-radius: 5px; 
    padding: 5px; 
    cursor: pointer; 
    background-color: white; 
    color: black; 
    border: 1px solid transparent; 
  } 
  .jqx-sortable div:hover { 
    border: 1px solid #356AA0; 
  } 
</style>

Defines a bounding box that the sortable items are constrained to while dragging.

<template>
  <div class="sortable-container">
    <JqxSortable ref="mySortable" :containment="'.sortable-container'">
      <div class="sortable-item">Nancy Davolio</div>
      <div class="sortable-item">Andrew Fuller</div>
      <div class="sortable-item">Janet Leverling</div>
      <div class="sortable-item">Margaret Peacock</div>
      <div class="sortable-item">Steven Buchanan</div>
    </JqxSortable>
  </div>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    }
  } 
</script>
 
<style>
  .jqx-sortable {
    margin: 2px;
    padding: 5px;
    width: 200px;
    border: lightblue solid 2px;
    float: left;
  }
  .sortable-item {
    border-radius: 5px;
    padding: 5px;
    background-color: white;
    color: black;
  }
  .sortable-item:hover {
    background-color: #356AA0;
    color: white;
  } 
</style>

Defines the cursor that is being shown while sorting.

<template>
  <JqxSortable ref="mySortable"
    :cursor="'move'">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

Moves the sorting element or helper so the cursor always appears to drag from the same position. Coordinates can be given as a hash using a combination of one or two keys: { top, left, right, bottom }.

<template>
  <JqxSortable ref="mySortable"
    :cursorAt='{ left: 5, top:5 }'>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

Time in milliseconds to define when the sorting should start. Adding a delay helps preventing unwanted drags when clicking on an element.

<template>
  <JqxSortable ref="mySortable"
    :delay="500">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

Disables the widget if set to true.

<template>
  <JqxSortable ref="mySortable"
    :disabled="true">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

Tolerance, in pixels, for when sorting should start. If specified, sorting will not start until after mouse is dragged beyond distance. Can be used to allow for clicks on elements within a handle.

<template>
  <JqxSortable ref="mySortable"
    :distance="10">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

If false, items from this sortable can't be dropped on an empty connect sortable.

<template>
  <div>
    <JqxSortable ref="mySortable1" :autoCreate="false"></JqxSortable>
    <JqxSortable ref="mySortable2" :autoCreate="false"></JqxSortable>
  </div> 
</template> 
<script> 
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue'; 
  export default { 
    components: { 
      JqxSortable 
    }, 
    data: function () { 
      return { 
        options: { connectWith: '.sortable', dropOnEmpty: false, opacity: 0.5 },
        firstNames: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven'],
        lastNames: ['Davolio', 'Fuller', 'Leverling', 'Peacock', 'Buchanan'],
      }
    },
    mounted: function () {
      this.loadInfo();
      this.$refs.mySortable1.createComponent(this.options);
      this.$refs.mySortable2.createComponent(this.options);
    },
    methods: {
      loadInfo: function () {
        let sortableList1 = ''; 
        let sortableList2 = ''; 
        for (let i = 0; i < this.firstNames.length; i++) { 
          const element = '<div>' + this.firstNames[i] + ' ' + this.lastNames[i] + '</div>';
          sortableList1 = sortableList1 + element; 
        }
        const mySortable1 = this.$refs.mySortable1.$el;
        const mySortable2 = this.$refs.mySortable2.$el;
        mySortable1.classList.add('sortable');
        mySortable2.classList.add('sortable');
        mySortable1.innerHTML = sortableList1;
        mySortable2.innerHTML = sortableList2;
      }
    }
  } 
</script> 
<style>
  .jqx-sortable {
    margin: 2px; 
    padding: 5px; 
    float: left; 
    width: 200px; 
    border: lightblue solid 1px; 
    margin-right: 30px; 
  } 
  .jqx-sortable div { 
    border-radius: 5px; 
    padding: 5px; 
    cursor: pointer; 
    background-color: white; 
    color: black; 
    border: 1px solid transparent; 
  } 
  .jqx-sortable div:hover { 
    border: 1px solid #356AA0; 
  } 
</style>

If true, forces the helper to have a size.

<template>
  <JqxSortable ref="mySortable"
    :forceHelperSize="true">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

Sets or gets the displaying of the popover's arrow.

<template>
  <JqxSortable ref="mySortable"
    :forcePlaceholderSize="true">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

Snaps the sorting element or helper to a grid, every x and y pixels.

<template>
  <JqxSortable ref="mySortable"
    :grid=" [ 50, 50 ] ">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

Restricts sort start click to the specified element.

<template> 
  <JqxSortable ref="mySortable1" :handle="'.handle'">
    <div class="sortable-item"> 
      <div class="handle">Drag me</div>
      <div>Nancy Davolio</div>
    </div> 
    <div class="sortable-item">
      <div class="handle">Drag me</div>
      <div>Andrew Fuller</div>
    </div>
    <div class="sortable-item">
      <div class="handle">Drag me</div>
      <div>Janet Leverling</div>
    </div>
    <div class="sortable-item">
      <div class="handle">Drag me</div>
      <div>Margaret Peacock</div>
    </div>
  </JqxSortable> 
</template> 
 
<script> 
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue'; 
 
  export default {
    components: {
      JqxSortable
    }
  } 
</script> 
 
<style>
  .jqx-sortable { 
    margin: 2px; 
    padding: 5px; 
    width: 200px; 
    border: lightblue solid 2px; 
    float: left; 
  } 
  .sortable-item { 
    border-radius: 5px; 
    padding: 5px; 
    background-color: white;
    color: black;
  }
  .sortable-item:hover {
    background-color: #356AA0;
    color: white;
  }
  .handle {
    color: lightgray;
  }
</style>

Allows for a helper element to be used for dragging display.

<template>
  <JqxSortable ref="mySortable"
    :helper="'clone'">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

Specifies which items inside the element should be sortable.

<template>
  <JqxSortable ref="mySortable1" :items="'.sortable-item'">
    <div class="item">Members</div>
    <div class="sortable-item">Nancy Davolio</div>
    <div class="sortable-item">Andrew Fuller</div>
    <div class="sortable-item">Janet Leverling</div>
    <div class="sortable-item">Margaret Peacock</div>
  </JqxSortable> 
</template> 
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    }
  }
</script> 
 
<style> 
  .jqx-sortable { 
    margin: 2px; 
    padding: 5px; 
    width: 200px; 
    border: lightblue solid 2px; 
    float: left; 
  } 
  .sortable-item { 
    border-radius: 5px; 
    padding: 5px; 
    background-color: white; 
    color: black; 
  }
  .item {
    border-radius: 5px;
    padding: 5px;
    background-color: #578AA0;
    color: white;
  }
  .sortable-item:hover {
    background-color: #356AA0;
    color: white;
  } 
</style>

Defines the opacity of the helper while sorting. From 0.01 to 1.

<template>
  <JqxSortable ref="mySortable"
    :opacity="0.5">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

A class name that gets applied to the otherwise white space.

<template>
  <JqxSortable ref="mySortable"
    :placeholderShow="'sortable-placeholder'">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

Whether the sortable items should revert to their new positions using a smooth animation.

<template>
  <JqxSortable ref="mySortable"
    :revert="true">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

If set to true, the page scrolls when coming to an edge.

<template>
  <JqxSortable ref="mySortable"
    :scroll="false">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

Defines how near the mouse must be to an edge to start scrolling.

<template>
  <JqxSortable ref="mySortable"
    :scrollSensitivity="10">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

Allows for a helper element to be used for dragging display.

<template>
  <JqxSortable ref="mySortable"
    :scrollSpeed="40">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

Specifies which mode to use for testing whether the item being moved is hovering over another item.

<template>
  <JqxSortable ref="mySortable"
    :tolerance="'pointer'">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

Allows for a helper element to be used for dragging display.

<template>
  <JqxSortable ref="mySortable"
    :zIndex="2000">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

This event is triggered on drag start when are used connected lists.

Code examples

Bind to the activate event of jqxSortable.

<template>
  <JqxSortable ref="mySortable" @activate="onActivate($event)"
   >
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    },
    methods: {
      onActivate: function (event) {
        alert('do something...');
      }
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

This event is triggered when sorting stops, but when the placeholder/helper is still available.

Code examples

Bind to the beforeStop event of jqxSortable.

<template>
  <JqxSortable ref="mySortable" @beforeStop="onBeforeStop($event)"
   >
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    },
    methods: {
      onBeforeStop: function (event) {
        alert('do something...');
      }
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

This event is triggered when the DOM position of an item is changed.

Code examples

Bind to the change event of jqxSortable.

<template>
  <JqxSortable ref="mySortable" @change="onChange($event)"
   >
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    },
    methods: {
      onChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

This event is triggered when sorting was stopped, is propagated to all possible connected lists.

Code examples

Bind to the deactivate event of jqxSortable.

<template>
  <JqxSortable ref="mySortable" @deactivate="onDeactivate($event)"
   >
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    },
    methods: {
      onDeactivate: function (event) {
        alert('do something...');
      }
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

This event is triggered when a sortable item is moved away from a sortable list.

Code examples

Bind to the out event of jqxSortable.

<template>
  <JqxSortable ref="mySortable" @out="onOut($event)"
   >
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    },
    methods: {
      onOut: function (event) {
        alert('do something...');
      }
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

This event is triggered when a sortable item is moved into a sortable list.

Code examples

Bind to the over event of jqxSortable.

<template>
  <JqxSortable ref="mySortable" @over="onOver($event)"
   >
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    },
    methods: {
      onOver: function (event) {
        alert('do something...');
      }
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

This event is triggered when an item from a connected sortable list has been dropped into another list.

Code examples

Bind to the receive event of jqxSortable.

<template>
  <JqxSortable ref="mySortable" @receive="onReceive($event)"
   >
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    },
    methods: {
      onReceive: function (event) {
        alert('do something...');
      }
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

This event is triggered when a sortable item from the list has been dropped into another.

Code examples

Bind to the remove event of jqxSortable.

<template>
  <JqxSortable ref="mySortable" @remove="onRemove($event)"
   >
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    },
    methods: {
      onRemove: function (event) {
        alert('do something...');
      }
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

This event is triggered during sorting.

Code examples

Bind to the sort event of jqxSortable.

<template>
  <JqxSortable ref="mySortable" @sort="onSort($event)"
   >
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    },
    methods: {
      onSort: function (event) {
        alert('do something...');
      }
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

This event is triggered when sorting starts.

Code examples

Bind to the start event of jqxSortable.

<template>
  <JqxSortable ref="mySortable" @start="onStart($event)"
   >
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    },
    methods: {
      onStart: function (event) {
        alert('do something...');
      }
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

This event is triggered when sorting has stopped.

Code examples

Bind to the stop event of jqxSortable.

<template>
  <JqxSortable ref="mySortable" @stop="onStop($event)"
   >
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    },
    methods: {
      onStop: function (event) {
        alert('do something...');
      }
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

This event is triggered when the user stopped sorting and the DOM position has changed.

Code examples

Bind to the update event of jqxSortable.

<template>
  <JqxSortable ref="mySortable" @update="onUpdate($event)"
   >
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    },
    methods: {
      onUpdate: function (event) {
        alert('do something...');
      }
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

Cancels a change in the current sortable and reverts it to the state prior to when the current sort was started.

<template>
  <JqxSortable ref="mySortable"
   >
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    },
    mounted: function () {
      this.$refs.mySortable.cancel();
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

Removes the sortable functionality.

<template>
  <JqxSortable ref="mySortable"
   >
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    },
    mounted: function () {
      this.$refs.mySortable.destroy();
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

Disables the widget.

<template>
  <JqxSortable ref="mySortable"
   >
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    },
    mounted: function () {
      this.$refs.mySortable.disable();
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

Enable the widget.

<template>
  <JqxSortable ref="mySortable"
   >
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    },
    mounted: function () {
      this.$refs.mySortable.enable();
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

Refresh the items.

<template>
  <JqxSortable ref="mySortable"
   >
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    },
    mounted: function () {
      this.$refs.mySortable.refresh();
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

Refresh the cached positions of the sortable items.

<template>
  <JqxSortable ref="mySortable"
   >
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </JqxSortable>
</template>
 
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
 
  export default {
    components: {
      JqxSortable
    },
    mounted: function () {
      this.$refs.mySortable.refreshPositions();
    }
  }
</script>
<style>
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
</style>

Serializes the jqxSortable item ids into a form/ajax submittable string. Calling this method produces a hash that can be appended to any url to easily submit a new item order back to the server.

<template>
  <JqxSortable ref="mySortable">
    <div id="sort_1">1</div>
    <div id="sort_1">2</div>
    <div id="sort_1">3</div>
    <div id="sort_1">4</div>
    <div id="sort_1">5</div>
  </JqxSortable>
</template>
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
  export default {
    components: {
      JqxSortable
    },
    mounted: function () {
      const value = this.$refs.mySortable.serialize({ key: 'sort' });
      alert(value);
    }
  }
</script>
<style>
  .jqx-sortable div {
    margin: 1px;
    background-color: lightblue;
    text-align: center;
    font-size: 20px;
    width: 100px;
    height: 30px;
  }
</style>

Serializes the jqxSortable item ids into an array of strings.

<template>
  <JqxSortable ref="mySortable">
    <div id="sort_1">1</div>
    <div id="sort_2">2</div>
    <div id="sort_3">3</div>
    <div id="sort_4">4</div>
    <div id="sort_5">5</div>
  </JqxSortable>
</template>
<script>
  import JqxSortable from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsortable.vue';
  export default {
    components: {
      JqxSortable
    },
    mounted: function () {
      const array = this.$refs.mySortable.toArray();
      console.log(array);
    }
  }
</script>
<style>
  .jqx-sortable div {
    margin: 1px;
    background-color: lightblue;
    text-align: center;
    font-size: 20px;
    width: 100px;
    height: 30px;
  }
</style>