Based on native JS drag library, incidentally packaged into vUE components, write document time than write code time is also long, share to everyone ~~~

dnd.js

Installation method

Methods a

npm install dnd.js --saveCopy the code

Way 2

Download dist/dnd.js from your project and insert it into your project with the script tag, which can be accessed through window.dndCopy the code

<script type="text/javascript" src="dist/dnd.js"></script>Copy the code

The easiest way to use it is to see the smallest demo
You can also look at a slightly more complex demo

import { Drag.Drop } from 'dnd.js'

new Drag(element, options)
new Drop(element, options)Copy the code

If you’re using mode two, you can use it like this

var Drag = dnd.Drag
var Drop = dnd.Drop
new Drag(element, options)
new Drop(element, options)Copy the code

Minimum demo code presentation

<! DOCTYPE html> <html>
  <head>
    <meta charset="utf-8">
    <title> Minimize demo</title>
    <script type="text/javascript" src="../dist/dnd.js"></script>
    <style>
      html.body { width:100%; height:100%; }
      body { margin:0; padding:20px; box-sizing:border-box; }
      .drop { margin:20px auto; width:100%; height:100px; border:1px solid # 000; }
    </style>
  </head>

  <body>
    <div class="drop"></div>
    <div class="drag"> drag me to the top box </div>
  </body>

  <script>
    var Drag = dnd.Drag
    var Drop = dnd.Drop
    new Drag('.drag')
    new Drop('.drop', {
      onDrop: function (params) {
        params.el.appendChild(params.sourceNode)
      }
    })
  </script>
</html>Copy the code

Parameters that

create

new Drag(element, options)
new Drop(element, options)Copy the code

parameter	If required	type	instructions
element	is	String or htmlElementObject	You can pass in a class name or an ID name or a DOM node
options	is	Object	The parameters and callback functions are described below

The options (Drag)

Such as:

  let element = '.drag-container'
  let options = {
    data: 'Drag the parameter that you want to pass to the Drop object'.onDragStart: function (params) {
      console.log('Listen until the drag starts')},onDragEnd: function (params) {
      console.log('Listen until the drag ends')}}new Drag(element, options)Copy the code

parameter	If required	type	instructions
data	no	any	Drag the parameter that you want to pass to the Drop object
onDragStart	no	Function	Drag to start the callback function
onDragEnd	no	Function	Drag to end the callback function

The options (Drop)

Such as:

  let element = '.drop-container'
  let options = {
    name: 'The name of the current Drop object'.onDragStart (params) {
      console.log('Listen until the drag starts')},onDragEnter (params) {
      console.log('Listen for dragged elements to enter')},onDragOver (params) {
      console.log('Listens for the dragged element to move above it')
      console.log('This function will be called continuously')},onDragLeave (params) {
      console.log('Listen for the dragged element to leave')},onDrop (params) {
      console.log('Listen for the dragged element to drop above you')},onDragEnd (params) {
      console.log('Listen until the drag ends')}}new Drop(element, options)Copy the code

Options property description:

attribute	If required	type	instructions	Description of callback function parameters
name	no	String	Defines the name of the current Drop object	–
onDragStart	no	Function	Called when a drag starts	See instructions below
onDragEnter	no	Function	Called when you drag to enter	See instructions below
onDragOver	no	Function	Called when the dragged element moves above itself. This function is called continuously	See instructions below
onDragLeave	no	Function	Called when dragging away	See instructions below
onDrop	is	Function	Called when the dragged element is dropped over itself	See instructions below
onDragEnd	no	Function	Called when the drag ends	See instructions below

attribute	type	describe
data	indefinite	The type of the data attribute defined by the Drag element is determined by the data attribute passed in when the Drag object is created
el	Object	Current DOM node
enter	Boolean	Whether to enter the current range flag bit, Boolean value
methods	Object	See the description of methods in the callback function parameters below
name	String	The Drop name, which is needed when destroying the current Drag object
sourceNode	Object	The DOM node of the element being dragged

The methods object in the callback function is described as follows:

Provides methods to call callback functions

ShowStateicon: displays the status icon. Example: showStateicon(‘add’)

Ss2.bdstatic.com/lfoZeXSm1A5…

HideStateicon: Hides the status icon
RemoveDragedNode: removeDragedNode: removeDragedNode(‘fade’) : removeDragedNode(‘fade’)

GetStateIconNode: Gets the dom node of the state icon that moves with the mouse
DestroyDrop: Destroys the current Drop object

The method name	The sample	Parameters that	describe
showStateicon	params.methods.showStateicon(‘add’)	Parameter type: String, built-in three common ICONS: add (‘add’), error (‘error’), Delete (‘delete’), reject (reject), pass the corresponding name, you can also customize the icon, directly pass the full address of the picture	Display status icon. After calling, a small icon will appear next to the mouse to move with the mouse. To hide it, just call hideStateicon function
hideStateicon	params.methods.hideStateicon()	There is no parameter	Hide status ICONS that move with the mouse (ICONS are not displayed by default if showStateicon is not called)
removeDragedNode	params.methods.removeDragedNode(animationName, time)	AnimationName (animation type), parameter type :String, optional: fade/blost/back, time(animation time, in milliseconds), parameter type: Number, optional	Remove the dragged element that moves with the mouse, and if there is no parameter, it will disappear directly. If there is a parameter, it means that the vanishing animation is performed and then disappears. Currently, there are three kinds of animations supported, namely, fade, Blost and Rebound. removeDragedNode(‘blost’, 300)
getStateIconNode	params.methods.getStateIconNode()	There is no parameter	Returns the status icon DOM node that moves with the mouse
destroyDrop	params.methods.destroyDrop({name})	Parameter type: String, Drag the name of the object	The Drag object cannot be received after the Drop object is destroyed

Based on native JS drag library, incidentally packaged into vUE components, write document time than write code time is also long, share to everyone ~~~

dnd.js

Installation method

Parameters that

Options property description:

The methods object in the callback function is described as follows:

Related Posts