Github address: github.com/qiangzi7723…

The current compatibility of this library is compatible with IE8, so if you need to compatible IE8 friends may wish to try. The library has written a lot of comments, for those who want to see the source code is a good choice. If you feel good, you can click a star on Github. Thank you. Part of the library idea refers to the implementation of Draggabilly, but because Draggabilly also relies on several small libraries, resulting in a bit of bloated source code, the author did not optimize, so I have the idea to write a new drag library, compatible with IE8.

Draggable

Build a lightweight native drag and drop library across platforms

Summary

I wrote a drag library, based on native JS implementation, without any dependence, but also made IE8 compatible, in the case of IE8 transform back to position implementation. Drag animations are implemented using requestAnimationFrame tied to the Render function rather than using mousemove callbacks. In addition, the library also wrote a lot of notes to facilitate the interpretation and communication of the source code. If you think this library is well written or if you have a good learning experience click on the star in the upper right corner, thank you.

Install

Import it directly from the SRC folder

Usage

<div id='app'></div>Copy the code

You can pass in the selector directly

new Draggable('#app');Copy the code

Or pass in a DOM node

var elem=document.querySelector('#app');
new Draggable(elem);Copy the code

If you need to add drag-and-drop for multiple elements, loop through it

var elem=document.querySelectorAll('.app'); for(var i=0,len=elem.length; i<len; i++){ new Draggable(elem[i]); }Copy the code

API

The API view

new Draggable('#app',{
    parentMove:'#container',
    backToPosition:false,
    axis:'x',
    grid:{x:40},
    addClassName:'is-dragging',
    cursorCancel:false,
});Copy the code

backToPosition

The default drag animation is implemented through the Transform property, so you can use this parameter if you want to use the Position property for drag animation

new Draggable('#app',{
    backToPosition:true
});Copy the code

It is automatically used in IE8positionImplement drag-and-drop

parentMove

ParentMove sets the parent element of the move, for example

new Draggable('#app',{
    parentMove:'#container'
});Copy the code

Indicates that when you click on the App element, the App element is not dragged, but moves the entire Container element. This API is useful when you need to define the top drag bar

axis

Setting this parameter indicates that only one direction can be dragged

new Draggable('#app',{
    axis:'x'
});Copy the code

grid

Sets the unit to move when dragging

new Draggable('#app',{
    grid:{x:40,y:40}
});Copy the code

addClassName

Add a className to the drag process to make it easier to add drag styles

new Draggable('#app',{
    addClassName:'is-dragging'
});Copy the code

cursor

Add cursor: Move property to draggable elements by default upon initialization, and cancel it if desired

new Draggable('#app',{
    cursorCancel:true
});Copy the code

Late release iteration

  • Added AMD specifications.
  • Add event binding interfaces.
  • Add perfect error output for easy debugging.
  • With the zIndex interface, moving elements are always at the top.