A Javascript Library That Turn Draggable Elements and Can Be Used in React, Vue and Angular

Create A Draggable, Resizable, and Custom Dialog A Javascript Library That Turn Draggable Elements and Can Be Used in React, Vue and Angular

Create A Draggable, Resizable, and Custom Dialog

This is a library that use Vanilla Javascript to create draggable dialogs. He automates the process of create events that listen to the touches and clicks and moves.

So, you don't need to worry about create javascript code, to turn draggable your elements, you will only create the html and styles of the dialog, and the lib will turn it draggable to desktop and phones users.

See a demo page, and as the source code is simple.

Why?

The dialog box in sites are very common, they have different utilities. But, I don't know something that helps developers to automate the process of creating Draggable dialogs. I only found a snippet of codes that are either poorly documented or difficult to custom, or with another mistake.

So to help me and the others, I decided to write a lib that turns containers draggable, she should be custom, easy to use, and well documented.

Examples

To turn a dialog draggable, you need only type this:

new Draggable({
  "dialogId"                   : "elementId",
  "elementThatCaptureTheClick" : "elementId"
})

As you see, you have to pass to Draggable an object with the id of the element that will be draggable and the id of the element that will listen to touches and clicks to drag the dialog. Normally, this is the top bar of the dialog, but can be whatever element that you want, or can be the entire dialog, so you can drag touching in any part of the dialog.

To see more methods that this object can have, see the documentation section.

Installation

The library can be used in the browser or in NodeJs environment to be used in React or other libraries.

Installation in browser

To use in the browser, you can import this library in a tag script:

<script src="https://ghcdn.rawgit.org/raulpy271/DraggableDialog/1.0.2/dist/Draggable.js"></script>

Installation in NodeJs (ReactJs or others libraries)

You can use the npm to install this library with this command:

$ npm install draggable_dialog --production

I used this library with reactJs, but you can use it with whatever library/framework that you want. It's simple, you only need to install it with npm and execute the Draggable class, but you have to pay attention to execute it when the component is rendered.

See an example in react:

import {useEffect} from 'react'
import Draggable from 'draggable_dialog'
import MyComponent from './MyComponent.js'

const MyComponentDraggable = () => {
  useEffect( () => 
    new Draggable({
      "dialogId" : "MyComponentId",
      "elementThatCaptureTheClick" : "MyComponentId"
    })
  )
  return <MyComponent/>
}

I use useEffect to execute the library after the component is rendered. Feels free to add examples with other libraries.

documentation

To use all features you should know all parameters passed to the Draggable class. The parameters is passed via an object. This object can have these methods:

Download Details:

Author: raulpy271

Demo: https://raulpy271.github.io/DraggableDialog/

Source Code: https://github.com/raulpy271/DraggableDialog

vue vuejs javascript

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.