Laravel Vue Js Draggable Component with Timer

Author - Milan Bera

Introduction

Vue.js is an open source framework for building client-side applications. Vue JS mainly used for single page user interface application. Vue JS component is contained unit of code that represents logical block of your application. Components are reusable Vue instance with a name.

Features of Vue js

Templates

> Vue js utilizes a HTML-based template that allows to binding Vue instance’s data.

Reactivity

> It uses plain javascript objects and optimised re-rendering.

Components

> Vue js component is contained unit of code that represents logical block of your application.

Transitions

> Vue js apply transition effects when items are inserted, updated, or removed.

Routing

> Vue js gives an interface to change what is shown on the page dependent on the present URL way paying little respect to how it was changed.

Vue JS Components

Components are important features for that creates custom elements, which can be reused in HTML. Here we can see two types of components,

  • Draggable Component

  • Countdown Timer Component

Draggable Component

Draggable component is used for drag any component and move from one place to other place in screen.

To make component draggable need to install draggable library. Run the below command in project command prompt

npm install vue-drag-it-dude --save

Now, import draggable component in the vue js page. like,

import DragItDude from "vue-drag-it-dude";

   	export default {
           name: "App",
           components: {
             DragItDude
           },
       }

Then in vue page in HTML section add following code for display section for draggable elements items.

 <drag-it-dude 
  @dragging="handleDragging"
  @dropped="handleDropped">
  <div class="innerElement"> {{ custom_new_text }}<div>
</drag-it-dude>

There are two function call. @dragging – handleDragging method call when item dragging active. And @dropped – handleDropped method called when item is drag from one place to another place. handleDragging and handleDropped function declare in methods. like,

data: () => ({
    	custom_new_text: "Just move me!",
  }),
 methods: {
            handleDragging() {
                this.custom_new_text = "This function is called when drag continue to item";
            },
            handleDropped() {
                this.custom_new_text = "This is call when dropped item";
            },
 }

Countdown Timer Component

It is used for display timer counter. Using of this timer  we can manage time based condition or functionality like we can used timer counter for timer based quiz.

To display timer component need to install countdown timer library run the below command in project command prompt

npm i vuejs-countdown-timer -S

Now, import Countdown Timer component in the vue js page. like,

import VueCountdownTimer from 'vuejs-countdown-timer';

Vue.use(VueCountdownTimer);

Then in vue page in HTML section add following code for display timer counter.

<vue-countdown-timer
       @start_callback="startCallBack('event started')"
       @end_callback="endCallBack('event ended')"
       :start-time="Date.now()"
       :end-time="Date.now() + 10000"
       :interval="1000"
       :start-label="'Timer '"
       :end-label="'Timer '"
       :end-text="'Timer : 0 second'"
       :seconds-txt="' seconds'">
        <template slot="countdown" slot-scope="scope">
          <span>{{scope.props.seconds}}</span>
           <i>{{scope.props.secondsTxt}}</i>
        </template>
</vue-countdown-timer>

There are two methods for custom function call on timer counter start or end. In these function you can add your custom code for timer functionality.

methods: {
startCallBack: function (x) {
		//This is call when timer counter start
         	},
         	endCallBack: function (x) {
            	//This is call when timer counter end
         	},
}

Here, we create sample page for creating Draggable component and Time counter component. See below image

In the above image, create quiz page. In this page there are two main components used, one is draggable component and another is timer counter component.

You can move draggable box or component from left to right and based on component move we can call handleDropped() method. In this method we can check answer is right or wrong.

Timer component shows the how much time is remain for the quiz. After time is up or remaining second is 0 then end up the quiz and give the result. When time is end then call endCallBack() method. In this method we can put our custom code for quiz end and give the result based on you give the answer of given questions.

Conclusion

Component is unit of code that represents logical block of your application. Draggable component is useful to move any component from one place to another place. Also based on that draggable event make the custom changes or make custom functionality. To make a list sortable, just put elements in draggable component. Timer countdown component is useful for display time and make timer based functionality. Also on timer counter start and end event easily do custom functionality as per requirement and easily make a functional countdown timer page. So, basically Draggable and Time countdown components are easy to use and easy to customize the options.

Finally, hope this blog will help to all. If you have any query or suggestion please comment below. And even more you can get the source code from GitHub

Don’t miss the next post!

Loading

Related Posts