logo

all drag

 

All Drag

Javascript mobile-friendly small and simple plugin provided for you to meet all needs of drag such as slide and free drag

Installation

cdn

clipboard 
<link href="https://cdn.jsdelivr.net/npm/all_drag/all_drag_style.css" rel="stylesheet" crossorigin="anonymous">

<script  src="https://cdn.jsdelivr.net/npm/all-drag@1.2.0/index_minify.js" rel="stylesheet" crossorigin="anonymous"></script>

download

source code

npm

clipboard 
npm i all-drag --save

github

https://github.com/behnamrhp/all_drag.git

Usage

to start and set up an element to all drag plugin we need to:

  • import inherit class from plugin
  • introduce an div or any element with unique id and send it to create function of plugin.


    • Note: for use with panel to drag you should use an element with closing tag(except p tag) Note 2:if you use this package from cdn, there is no need to import

    clipboard 
    
import{ALL_DRAG} from "all_drag";

    ALL_DRAG.create(<'your element id'>,options);

    General Options

    Usage Example


    ALL_DRAG.create(<'your element id'>,{
        drag_cursor:'grabbing',
        drag_type:{
            type: 'slide'
       },
        draggableAllowedNumber:  2,
        panel: {
            hover_cursor: 'grab',
            panel_height: '30',
            panel_color:  '#adb8ba',
        },
        revert: true,
        transitionDuration: '.7',
    });

    Options

    Name Type Options Default Description
    drag_type Object - - In this object we choose type of drag and other drag options that We will get acquainted with them in their own sections
    type String free/slide free choose the type of drag such as slide or free drag
    drag_cursor String - false write name style of the cursor on dragging event
    revert boolean - false choose between your element will be return to it first place after stop drag event or not
    transitionDuration Number - '.2' write the number of transition time (revert or close slide drag & ...) per second
    draggableAllowedNumber Number - 0(infinite) Write how much drag your users are allowed to use
    panel Object - - in this object, we choose between the below options for panel (in free panel optional to use)
    hover_cursor String - auto write name style of the cursor on panel hover event
    panel_color String - #656565 write your panel color
    panel_height Number - 15 write your panel height (per px)
    panel_radius Number - 10 panel redius (will be set by direction of panel)
    panel_hide Boolean - false choose is panel will be transparent or not

    Free Drag

    Usage

    to start and set up an element to free drag we need to set type option to 'free' (in drag type object)

    Note: for use with panel to drag you should use an element with closing tag 


    ALL_DRAG.create(<'your element id'>,{
        drag_type:{
            type: 'free',
            freeDrag: {
                drag_place: 'self',
                ...('other object options')
             }
        }
      });
    Note:all of the below options should be use in freeDrag object inside of drag_type object

    Options

    Name Type Options Default Description
    drag_place String self/panel 'self' choose place, where to drag on drag event (panel or element itSelf)
    panel_side String top/left/bottom/right 'top' if you choose panel in previous option you can set direction of panel to place relation to element
    drag_style String flat/elevate 'flat' choose style of element on dragging event between flat or elevate options
    drag_scale Number - '1.05' if you choose elevate in previous option you can set scale size of element on drag event
    drag_shadow_color String - '#737373' if you choose elevate in previous option you can set color of shadow on drag event
    drag_shadow_blur Number - '5' if you choose elevate in previous option you can set blur size of shadow on drag event
    drag_shadow_distance Number - '5' if you choose elevate in previous option you can set distance of Y direction shadow on drag event
    allowedDistrict String - false in this section, if you want to drag the element inside another element you should insert the name of the second element ID in this option

    Events

    Name Description
    allFreeDragStart Fired when mouse down
    allFreeDragMove Fired when mouse move on drag
    allFreeDragStop Fired when mouse up on drag

    Example

      Drag me

    ALL_DRAG.create('example_elem_free',{
        drag_type:{
            type: 'free',
            freeDrag: {
                drag_place: 'self',
                panel_side: 'top',
                drag_style: 'elevate',
                allowedDistrict: 'free_drag_example_cont',
             },
        draggableAllowedNumber: 0,
        panel: {
            hover_cursor:  'grab',
            panel_height:  '30',
            panel_color:  '#adb8ba',

        },
        revert:  false,
        transitionDuration:  '.3',
        }
      });

    Slide Drag

    Usage

    to start and set up an element for the slide drag we need to set the type option to 'slide' (in drag type object) 


    ALL_DRAG.create(<'your element id'>,{
        drag_type:{
            type: 'slide'
            slideDrag: {
                direction: 'top',
                ...('other object options')
             }
        }
      });
    Note:all of the below options should be use in slideDrag object inside of drag_type object

    Options

    Name Type Options Default Description
    direction String top/left/right/bottom 'left' choose where should place the element inside of the screen
    closePercent Number 0-100 50 set percent of closing element
    percentBasis String self/browser 'self' Choose on what basis the closing percentage should be calculated
    clickToOpen String - false if you set an element id in this option,the slide drag element will be toggle on click this element
    resizeToDefaultOnHide Boolean - false if you set this option to true, the slide drag element will be resized to the init size when it closed
    otherDirPos Number 0-100 50 this option specify the position of the slide drag element in reverse direction of 'direction' option (it based on %)

    Events

    Name Description
    allSlideDragStart Fired when mouse down
    allSlideDragMove Fired when mouse move on drag
    allSlideDragStop Fired when mouse up on drag

    Example

    Note: to see the example of the slide drag element, drag the element in the right side of the screen
      Drag me

    ALL_DRAG.create('example_elem_slide',{
        drag_type:{
            type: 'slide'
            slideDrag: {
                direction: 'right',
                closePercent: 50,
                percentBasis: 'browser',
                clickToOpen: false,
                resizeToDefaultOnHide: true,
                otherDirPos: '35',
             }
        draggableAllowedNumber: 0,
        panel: {
            hover_cursor:  'grab',
            panel_height:  '30',
            panel_color:  '#adb8ba',

        },
        revert:  false,
        transitionDuration:  '.3',
        }
      });

    © 2021 Behnam Rahimpour. Plugin © All Drag