Laravel Vue Js Draggable Component with Timer

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

Draggable Component

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

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

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