Vue UI Components Documentation

Sets or gets where will be appended the draggable's feedback.

<template>
  <div id='draggable-parent'>
    <jqxDragDrop ref='myDragDrop'
      :restricter="restricter" :dropTarget="'.drop-target'" :appendTo="'body'">  
      <div>I can be dragged only inside my parent</div>
    </jqxDragDrop>
    <div class='drop-target'>
      <div class='label'>I am a drop target</div>
    </div>
  </div>
</template>
 
<script>
  import JqxDragDrop from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue';
 
  export default {
    components: {
      JqxDragDrop
    },
    data: function () {
      return  {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
      }
    }
  }
</script>
<style>
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
</style>

Get the appendTo property.

let appendTo = this.$refs.myDragDrop.appendTo;

Sets or gets whether the dragging is disabled.

<template>
  <div id='draggable-parent'>
    <jqxDragDrop ref='myDragDrop'
      :restricter="restricter" :dropTarget="'.drop-target'" :disabled="true">  
      <div>I can be dragged only inside my parent</div>
    </jqxDragDrop>
    <div class='drop-target'>
      <div class='label'>I am a drop target</div>
    </div>
  </div>
</template>
 
<script>
  import JqxDragDrop from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue';
 
  export default {
    components: {
      JqxDragDrop
    },
    data: function () {
      return  {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
      }
    }
  }
</script>
<style>
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
</style>

Get the disabled property.

let disabled = this.$refs.myDragDrop.disabled;

Sets or gets the distance required for the cursor to pass befor the drag begins.

<template>
  <div id='draggable-parent'>
    <jqxDragDrop ref='myDragDrop'
      :restricter="restricter" :dropTarget="'.drop-target'" :distance="12">  
      <div>I can be dragged only inside my parent</div>
    </jqxDragDrop>
    <div class='drop-target'>
      <div class='label'>I am a drop target</div>
    </div>
  </div>
</template>
 
<script>
  import JqxDragDrop from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue';
 
  export default {
    components: {
      JqxDragDrop
    },
    data: function () {
      return  {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
      }
    }
  }
</script>
<style>
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
</style>

Get the distance property.

let distance = this.$refs.myDragDrop.distance;

This property can be used for setting some kind of information transferred with the draggable.

<template>
    <jqxDragDrop ref='myDragDrop'
      :data="data">  
      <div>Drag me</div>
    </jqxDragDrop>
</template>
 
<script>
  import JqxDragDrop from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue';
 
  export default {
    components: {
      JqxDragDrop
    },
    data: function () {
      return  {
        data: {foo: 'foo', bar: 'bar'}
      }
    }
  }
</script>
<style>
  .jqx-draggable > div {
    width: 50px; 
    height: 50px; 
    border: 1px solid #A67E3A; 
    background-color: #FFC663;
    padding: 10px;
  }
</style>

Get the data property.

let data = this.$refs.myDragDrop.data;

Sets or gets whether the draggable element will change its position ('default') or not ('none') when the element is dropped.

<template>
  <div id='draggable-parent'>
    <jqxDragDrop ref='myDragDrop'
      :restricter="restricter" :dropTarget="'.drop-target'" :dropAction="'none'">  
      <div>I can be dragged only inside my parent</div>
    </jqxDragDrop>
    <div class='drop-target'>
      <div class='label'>I am a drop target</div>
    </div>
  </div>
</template>
 
<script>
  import JqxDragDrop from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue';
 
  export default {
    components: {
      JqxDragDrop
    },
    data: function () {
      return  {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
      }
    }
  }
</script>
<style>
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
</style>

Get the dropAction property.

let dropAction = this.$refs.myDragDrop.dropAction;

Sets or gets the drop target. The drop target is a DOM element(s) for which jqxDragDrop triggers events when the user drags or drops the draggable element over that element(s). The drop target can be specified by using a selector or an object. If the user drags the draggable element over the drop target, the onDropTargetEnter event will be raised. If the draggable element is inside the drop target and the user drags the element outside the drop target, the onDropTargetLeave event is raised. When the user drops the draggable element over a drop target, the onTargetDrop event is raised.

<template>
  <div id='draggable-parent'>
    <jqxDragDrop ref='myDragDrop'
      :restricter="restricter" :dropTarget="'.dropTarget'">  
      <div>I can be dragged only inside my parent</div>
    </jqxDragDrop>
    <div class='drop-target'>
      <div class='label'>I am a drop target</div>
    </div>
  </div>
</template>
 
<script>
  import JqxDragDrop from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue';
 
  export default {
    components: {
      JqxDragDrop
    },
    data: function () {
      return  {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
      }
    }
  }
</script>
<style>
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
</style>

Get the dropTarget property.

let dropTarget = this.$refs.myDragDrop.dropTarget;

Sets or gets element's z-index when it's dragging.

<template>
  <div id='draggable-parent'>
    <jqxDragDrop ref='myDragDrop'
      :restricter="restricter" :dropTarget="'.drop-target'" :dragZIndex="6">  
      <div>I can be dragged only inside my parent</div>
    </jqxDragDrop>
    <div class='drop-target'>
      <div class='label'>I am a drop target</div>
    </div>
  </div>
</template>
 
<script>
  import JqxDragDrop from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue';
 
  export default {
    components: {
      JqxDragDrop
    },
    data: function () {
      return  {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
      }
    }
  }
</script>
<style>
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
</style>

Get the dragZIndex property.

let dragZIndex = this.$refs.myDragDrop.dragZIndex;

Sets or gets the feedback. The feedback is the object which is actually dragged by the user.

<template>
  <div id='draggable-parent'>
    <jqxDragDrop ref='myDragDrop'
      :restricter="restricter" :dropTarget="'.drop-target'" :feedback="'original'">  
      <div>I can be dragged only inside my parent</div>
    </jqxDragDrop>
    <div class='drop-target'>
      <div class='label'>I am a drop target</div>
    </div>
  </div>
</template>
 
<script>
  import JqxDragDrop from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue';
 
  export default {
    components: {
      JqxDragDrop
    },
    data: function () {
      return  {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
      }
    }
  }
</script>
<style>
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
</style>

Get the feedback property.

let feedback = this.$refs.myDragDrop.feedback;

Callback which is executing when the feedback is created.

<template>
  <div id='draggable-parent'>
    <jqxDragDrop ref='myDragDrop'
      :dropTarget="'.drop-target'" :initFeedback="initFeedback">  
      <div>I can be dragged only inside my parent</div>
    </jqxDragDrop>
    <div class='drop-target'>
      <div class='label'>I am a drop target</div>
    </div>
  </div>
</template>
 
<script>
  import JqxDragDrop from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue';
 
  export default {
    components: {
      JqxDragDrop
    },
    methods: {
      initFeedback: function (feedback) {
        feedback.css('background', 'blue');
        feedback.css('color', 'white');
        feedback.css('padding', '15px');
        feedback.text('I am feedback')
      }
    }
  }
</script>
<style>
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
</style>

Get the initFeedback property.

let initFeedback = this.$refs.myDragDrop.initFeedback;

Sets or gets draggable object's opacity when it's dragging.

<template>
  <div id='draggable-parent'>
    <jqxDragDrop ref='myDragDrop'
      :restricter="restricter" :dropTarget="'.drop-target'" :opacity="0.3">  
      <div>I can be dragged only inside my parent</div>
    </jqxDragDrop>
    <div class='drop-target'>
      <div class='label'>I am a drop target</div>
    </div>
  </div>
</template>
 
<script>
  import JqxDragDrop from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue';
 
  export default {
    components: {
      JqxDragDrop
    },
    data: function () {
      return  {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
      }
    }
  }
</script>
<style>
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
</style>

Get the opacity property.

let opacity = this.$refs.myDragDrop.opacity;

Callback which is executing when the drag ends.

<template>
  <div id='draggable-parent'>
    <jqxDragDrop ref='myDragDrop'
      :restricter="restricter" :dropTarget="'.drop-target'" :onDragEnd="onDragEnd">  
      <div>I can be dragged only inside my parent</div>
    </jqxDragDrop>
    <div class='drop-target'>
      <div class='label'>I am a drop target</div>
    </div>
  </div>
</template>
 
<script>
  import JqxDragDrop from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue';
 
  export default {
    components: {
      JqxDragDrop
    },
    data: function () {
      return  {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
      }
    },
    methods: {
      onDragEnd: function () {
        alert('onDragEnd');
      }
    }
  }
</script>
<style>
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
</style>

Get the onDragEnd property.

let onDragEnd = this.$refs.myDragDrop.onDragEnd;

Callback which is executing while dragging.

<template>
  <div id='draggable-parent'>
    <jqxDragDrop ref='myDragDrop'
      :restricter="restricter" :dropTarget="'.drop-target'" :onDrag="onDrag">  
      <div>I can be dragged only inside my parent</div>
    </jqxDragDrop>
    <div class='drop-target'>
      <div class='label'>I am a drop target</div>
    </div>
  </div>
</template>
 
<script>
  import JqxDragDrop from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue';
 
  export default {
    components: {
      JqxDragDrop
    },
    data: function () {
      return  {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
      }
    },
    methods: {
      onDrag: function (data, position) {
        console.log('Position Top: ' + position.top);
      }
    }
  }
</script>
<style>
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
</style>

Get the onDrag property.

let onDrag = this.$refs.myDragDrop.onDrag;

Callback which is executing when drag start.

<template>
  <div id='draggable-parent'>
    <jqxDragDrop ref='myDragDrop'
      :restricter="restricter" :dropTarget="'.drop-target'" :onDragStart="onDragStart">  
      <div>I can be dragged only inside my parent</div>
    </jqxDragDrop>
    <div class='drop-target'>
      <div class='label'>I am a drop target</div>
    </div>
  </div>
</template>
 
<script>
  import JqxDragDrop from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue';
 
  export default {
    components: {
      JqxDragDrop
    },
    data: function () {
      return  {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
      }
    },
    methods: {
      onDragStart: function (position) {
        alert('Position Top: ' + position.top);
      }
    }
  }
</script>
<style>
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
</style>

Get the onDragStart property.

let onDragStart = this.$refs.myDragDrop.onDragStart;

Callback which is executing when drag ends over the drop target.

<template>
  <div id='draggable-parent'>
    <jqxDragDrop ref='myDragDrop'
      :restricter="restricter" :dropTarget="'.drop-target'" :onTargetDrop="onTargetDrop">  
      <div>I can be dragged only inside my parent</div>
    </jqxDragDrop>
    <div class='drop-target'>
      <div class='label'>I am a drop target</div>
    </div>
  </div>
</template>
 
<script>
  import JqxDragDrop from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue';
 
  export default {
    components: {
      JqxDragDrop
    },
    data: function () {
      return  {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
      }
    },
    methods: {
      onTargetDrop: function (data) {
        alert('OnTargetDrop');
      }
    }
  }
</script>
<style>
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
</style>

Callback which is executing when the draggable enter any of it's drop targets.

<template>
  <div id='draggable-parent'>
    <jqxDragDrop ref='myDragDrop'
      :restricter="restricter" :dropTarget="'.drop-target'" :onDropTargetEnter="onDropTargetEnter">  
      <div>I can be dragged only inside my parent</div>
    </jqxDragDrop>
    <div class='drop-target'>
      <div class='label'>I am a drop target</div>
    </div>
  </div>
</template>
 
<script>
  import JqxDragDrop from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue';
 
  export default {
    components: {
      JqxDragDrop
    },
    data: function () {
      return  {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
      }
    },
    methods: {
      onDropTargetEnter: function () {
        alert('onDropTargetEnter');
      }
    }
  }
</script>
<style>
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
</style>

Get the onDropTargetEnter property.

let onDropTargetEnter = this.$refs.myDragDrop.onDropTargetEnter;

Callback which is executing when the draggable leave any of it's drop targets.

<template>
  <div class="main-container">
    <div id="draggable-parent">
      <JqxDragDrop class="draggable"            
             :onDropTargetLeave="onDropTargetLeave"
             :restricter="restricter" :dropTarget="'.drop-target'">
        <div class="label">I can be dragged only inside my parent</div>
      </JqxDragDrop>
      <div class="drop-target">
        <div class="label">I am a drop target</div>
      </div>
    </div>
  </div>
</template>
<script>
  import JqxDragDrop from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue";
  export default {
    components: {
      JqxDragDrop
    },
    data: function () {
      return {
        restricter: { left: 8, top: 8, width: 247, height: 247 }
      }
    },
    methods: {
      onDropTargetLeave: function (data) {
        alert('onDropTargetLeave');
      }
    }
  };
</script>
<style>
  .row {
    padding: 1px;
  }
  .draggable > div {
    border: 1px solid #bbb;
    background-color: #C9ECFF;
    width: 100px;
    height: 100px;
    left: 30px;
    top: 50px;
    padding: 5px;
    z-index: 2;
  }
  #draggable-parent {
    background-color: #eeffee;
    width: 350px;
    height: 350px;
    text-align: center;
    border: 1px solid #eee;
    float: left;
  }
  .main-container {
    width: 650px;
    z-index: 0;
  }
  .events > div {
    float: right;
    padding: 10px;
    font-family: Tahoma;
    font-size: 13px;
  }
  .label {
    position: relative;
    font-family: Verdana;
    font-size: 11px;
    color: #000;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 150px;
    height: 150px;
    border: 1px solid #ddd;
    margin-left: 190px;
    margin-top: 70px;
    z-index: 1;
  }
</style>

Get the onDropTargetLeave property.

let onDropTargetLeave = this.$refs.myDragDrop.onDropTargetLeave;

Sets or gets dragdrop's restrict area.

<template>
  <div id='draggable-parent'>
    <jqxDragDrop ref='myDragDrop'
      :restricter="restricter" :dropTarget="'.drop-target'">  
      <div>I can be dragged only inside my parent</div>
    </jqxDragDrop>
    <div class='drop-target'>
      <div class='label'>I am a drop target</div>
    </div>
  </div>
</template>
 
<script>
  import JqxDragDrop from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue';
 
  export default {
    components: {
      JqxDragDrop
    },
    data: function () {
      return  {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
      }
    }
  }
</script>
<style>
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
</style>

Get the restricter property.

let restricter = this.$refs.myDragDrop.restricter;

Sets or gets whether the draggable element will be reverted to it's original position after drop.

<template>
  <div id='draggable-parent'>
    <jqxDragDrop ref='myDragDrop'
      :restricter="restricter" :dropTarget="'.drop-target'" :revert="true">  
      <div>I can be dragged only inside my parent</div>
    </jqxDragDrop>
    <div class='drop-target'>
      <div class='label'>I am a drop target</div>
    </div>
  </div>
</template>
 
<script>
  import JqxDragDrop from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue';
 
  export default {
    components: {
      JqxDragDrop
    },
    data: function () {
      return  {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
      }
    }
  }
</script>
<style>
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
</style>

Get the revert property.

let revert = this.$refs.myDragDrop.revert;

Sets or gets the duration for which the draggable object will be reverted.

<template>
  <div id='draggable-parent'>
    <jqxDragDrop ref='myDragDrop'
      :restricter="restricter" :dropTarget="'.drop-target'" :revertDuration="300"
    :revert="true">  
      <div>I can be dragged only inside my parent</div>
    </jqxDragDrop>
    <div class='drop-target'>
      <div class='label'>I am a drop target</div>
    </div>
  </div>
</template>
 
<script>
  import JqxDragDrop from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue';
 
  export default {
    components: {
      JqxDragDrop
    },
    data: function () {
      return  {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
      }
    }
  }
</script>
<style>
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
</style>

Get the revertDuration property.

let revertDuration = this.$refs.myDragDrop.revertDuration;

Sets or gets whether the draggable item is over it's drop target when it's intersecting it or when it's fully inside it's target.

<template>
  <div id='draggable-parent'>
    <jqxDragDrop ref='myDragDrop' @dropTargetEnter="onDropTargetEnter($event)"
           :dropTarget="'.drop-target'" :tolerance="'fit'">
      <div>I can be dragged only inside my parent</div>
    </jqxDragDrop>
    <div class='drop-target'>
      <div class='label'>I am a drop target</div>
    </div>
  </div>
</template>
<script>
  import JqxDragDrop from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue';
  export default {
    components: {
      JqxDragDrop
    },
    methods: {
      onDropTargetEnter: function (event) {
        alert('DropTargetEntered!')
      }
    }
  }
</script>
<style>
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 10px;
    top: 10px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
</style>

Get the tolerance property.

let tolerance = this.$refs.myDragDrop.tolerance;

This event is triggered when the item is dragged for first time.

Code examples

Bind to the dragStart event of jqxDragDrop.

<template>
  <div id='draggable-parent'>
    <jqxDragDrop ref="myDragDrop" @dragStart="onDragStart($event)"
      :restricter="restricter" :dropTarget="'.drop-target'">  
      <div>I can be dragged only inside my parent</div>
    </jqxDragDrop>
    <div class='drop-target'>
      <div class='label'>I am a drop target</div>
    </div>
  </div>
</template>
 
<script>
  import JqxDragDrop from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue';
 
  export default {
    components: {
      JqxDragDrop
    },
    data: function () {
      return  {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
      }
    },
    methods: {
      onDragStart: function (event) {
        alert('do something...');
      }
    }
  }
</script>
<style>
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
</style>

This event is triggered when the item is dropped.

Code examples

Bind to the dragEnd event of jqxDragDrop.

<template>
  <div id='draggable-parent'>
    <jqxDragDrop ref="myDragDrop" @dragEnd="onDragEnd($event)"
      :restricter="restricter" :dropTarget="'.drop-target'">  
      <div>I can be dragged only inside my parent</div>
    </jqxDragDrop>
    <div class='drop-target'>
      <div class='label'>I am a drop target</div>
    </div>
  </div>
</template>
 
<script>
  import JqxDragDrop from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue';
 
  export default {
    components: {
      JqxDragDrop
    },
    data: function () {
      return  {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
      }
    },
    methods: {
      onDragEnd: function (event) {
        alert('do something...');
      }
    }
  }
</script>
<style>
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
</style>

This event is triggered while the item is dragging.

Code examples

Bind to the dragging event of jqxDragDrop.

<template>
  <div id='draggable-parent'>
    <jqxDragDrop ref="myDragDrop" @dragging="onDragging($event)"
      :restricter="restricter" :dropTarget="'.drop-target'">  
      <div>I can be dragged only inside my parent</div>
    </jqxDragDrop>
    <div class='drop-target'>
      <div class='label'>I am a drop target</div>
    </div>
  </div>
</template>
 
<script>
  import JqxDragDrop from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue';
 
  export default {
    components: {
      JqxDragDrop
    },
    data: function () {
      return  {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
      }
    },
    methods: {
      onDragging: function (event) {
        alert('do something...');
      }
    }
  }
</script>
<style>
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
</style>

This event is triggered when the draggable item is over it's drop target for first time.

Code examples

Bind to the dropTargetEnter event of jqxDragDrop.

<template>
  <div id='draggable-parent'>
    <jqxDragDrop ref="myDragDrop" @dropTargetEnter="onDropTargetEnter($event)"
      :restricter="restricter" :dropTarget="'.drop-target'">  
      <div>I can be dragged only inside my parent</div>
    </jqxDragDrop>
    <div class='drop-target'>
      <div class='label'>I am a drop target</div>
    </div>
  </div>
</template>
 
<script>
  import JqxDragDrop from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue';
 
  export default {
    components: {
      JqxDragDrop
    },
    data: function () {
      return  {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
      }
    },
    methods: {
      onDropTargetEnter: function (event) {
        alert('do something...');
      }
    }
  }
</script>
<style>
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
</style>

This event is triggered when the draggable item leave it's drop target.

Code examples

Bind to the dropTargetLeave event of jqxDragDrop.

<template>
  <div id='draggable-parent'>
    <jqxDragDrop ref="myDragDrop" @dropTargetLeave="onDropTargetLeave($event)"
      :restricter="restricter" :dropTarget="'.drop-target'">  
      <div>I can be dragged only inside my parent</div>
    </jqxDragDrop>
    <div class='drop-target'>
      <div class='label'>I am a drop target</div>
    </div>
  </div>
</template>
 
<script>
  import JqxDragDrop from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdragdrop.vue';
 
  export default {
    components: {
      JqxDragDrop
    },
    data: function () {
      return  {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
      }
    },
    methods: {
      onDropTargetLeave: function (event) {
        alert('do something...');
      }
    }
  }
</script>
<style>
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
</style>