ReactJS drag and drop functionality for mouse and touch devices

Overview

DragDropContainer and DropTarget

Live demo: peterh32.github.io/react-drag-drop-container

Features

  • Very easy to implement and understand.

  • Works on mouse and touch devices.

  • Automatically scrolls the page when you drag to the edge, so you can drag to a target that's initially offscreen.

  • Optional drag handles (with dragHandleClassName prop).

  • Can automatically highlight the dropTarget when dragging over it (highlightClassName property).

  • Can constrain dragging to one dimension with xOnly and yOnly properties.

  • Useful options like dragClone (drag a copy of the element), customDragElement (drag a custom element rather than the source element), and disappearDraggedElement (make the original element completely disappear while dragging).

  • Can implement using the components as wrappers or by passing them a render prop.


Installation

Install it in your project using npm:

npm install react-drag-drop-container --save

Basics

Set up a draggable element and a drop target for it:

import { DragDropContainer, DropTarget } from 'react-drag-drop-container';

<DragDropContainer targetKey="foo" >
    <div>Drag Me!</div>
</DragDropContainer>

<DropTarget targetKey="foo" >
    <p>I'm a valid drop target for the object above since we both have the same targetKey!</p>
</DropTarget>

Anatomy of a Drag and Drop

  • While dragging, the onDragEnter and onDragLeave events fire in the DropTarget. On a successful drop, the onHit event fires. These all pass the event data shown.

  • On a successful drop, the onDrop event fires in the DragDropContainer, passing back the event data shown.


Wiring Up the DragDropContainer:

<DragDropContainer 
    targetKey="foo" 
    dragData={some object} 
    onDrop={some method}
    onDragStart={some method} 
    onDrag={some method} 
    onDragEnd={some method} 
>
    <div>Drag Me!</div>
</DragDropContainer>

targetKey: Determines what DropTargets it can be dropped on.

dragData:Custom data to pass to the drop target.

onDrop: Callback that fires after a successful drop on a compatible target. See onDrop Event Data, below.

onDragStart, onDrag, onDragEnd (less commonly used): Callbacks during the drag process. See details in DropTarget Callbacks below.

onDrop Event Data

Passed back to DragDropContainer in the onDrop event:

{
    dropData: [whatever you put in the dropData prop for the DropTarget]
    dropElem: [reference to the DOM element being dragged]
    dragData: [whatever you put in the dragData prop]
    target: [reference to the DragDropContainer DOM element]
    ...plus a lot of standard react/js event data
}

Wiring Up the DropTarget:

<DropTarget 
    targetKey="foo" 
    dropData={some object} 
    onHit={some function}
    onDragEnter={some function} 
    onDragLeave={some function} 
>
    <p>Drop something on me</p>
</DropTarget>

dropData: Custom data to pass back to the DragDropContainer.

onDragEnter, onDragLeave, onHit: Callbacks that fire when a compatible DragDropContainer passes over. onHit is when a compatible container is dropped on the target. See event data below.

Event Data for DropTarget

Passed in onDragEnter, onDragLeave, and onHit:

{
    dragData: [whatever you put in the dragData prop for the DragDropContainer]
    dragElem: [reference to the DOM element being dragged]
    containerElem: [reference to the DragDropContainer DOM element]
    target: [reference to the DropContainer DOM element]
    ...plus a lot of standard event data
}

Examples

DropTarget with Multiple targetKeys

Wrap the element in multiple DropTargets, one for each targetKey:

  <DropTarget targetKey="foo">
    <DropTarget targetKey="bar">
      <div>You can drop a "foo" or a "bar on me</div>
    </DropTarget>
  </DropTarget>

Draggable Drop Target

Wrap the element in a DragDropContainer and a DropTarget:

  <DragDropContainer targetKey="foo">
    <DropTarget targetKey="bar">
      <div>You can drop a "bar" on me, or drag and drop me onto a "foo"</div>
    </DropTarget>
  </DragDropContainer>

Apply Hover Highlighting to a DropTarget

By default the container for your DropTarget has the classname 'highlighted' applied when a compatible DragDropContainer is hovering over it.

  <style>
    .highlighted .my_target {background-color: 'lightblue'}
  </style>

  <DropTarget targetKey="foo" onHit={this.dropped}>
    <div className="my_target">I turn blue when you drag a "foo" over me</div>
  </DropTarget>

...or do it manually with the onDragEnter and onDragLeave events:

  <DropTarget targetKey="foo" 
    onHit={this.dropped}
    onDragEnter={this.highlight}
    onDragLeave={this.unHighlight}
    >
    <div>Drop something on me</div>
  </DropTarget>

...where highlight and unHighlight are your own methods.

Make the target "consume" the draggable

Use event.containerElem to hide or delete the original element after a successful drop. In your DropTarget element:

  ...
  dropped(e){
      e.containerElem.style.visibility = 'hidden';
  }
  render() {
    return <DropTarget targetKey="foo" onHit={this.dropped}>[element code]</DropTarget>
  }
  ...

Use with a Render Prop

If you prefer, you can specify a render prop rather than a child component for DragDropContainer or DropTarget. These are equivalent:

    <DragDropContainer targetKey="foo">
        <div>Drag Me!</div>
    </DragDropContainer>

and

    <DragDropContainer 
        targetKey="foo">
        render={() => return <div>Drag Me!</div>}
    />

DragDropContainer Props

Key Props

These are not required, but you'll almost always want to set them.

dragData

Data about the dragged item that you want to pass to the target. Default is empty object.

targetKey

Optional string to specify which DropTargets will accept which DragDropContainers. Default is 'ddc'.

Other Props

customDragElement

If a DOM node is provided, we'll drag it instead of the actual object (which will remain in place).

Example:

const elem = <div class="drag_elem">Drag Me</div>;

<DragDropContainer customDragElement={elem}>
disappearDraggedElement

If true, then dragging an element causes it to disappear such that it takes up no space. Defaults to false, so that the original element space is still reserved while you are dragging. Not compatible with dragClone.

dragClone

If true, then the user appears to be dragging a copy of the original element (false by default, so that the user appears to be dragging the element itself).

dragElemOpacity

Opacity of the element while it's dragging. (Sometimes you want to be able to see what's below the element you're dragging.) Default is 0.9 (e.g. 90%).

dragHandleClassName

Class name for drag handle(s). Optional. If omitted, the whole thing is grabbable.

Tip: If you are using drag handles on an element that contains an image, use <img draggable="false"... to prevent the browser from letting users drag the image itself, which can be confusing.

noDragging

If true, dragging is turned off.

xOnly, yOnly

If true, then dragging is constrained to the x- or y direction, respectively.

zIndex

The z-index for the dragged item. Defaults to 1000 (so that it floats over the target). If that doesn't work for you, change it here.

DragDropContainer Callbacks

All optional. You'll generally set onDrop, but often skip the others.

onDragStart(dragData)

Runs when you start dragging. dragData is whatever you passed in with the dragData prop.

onDrag(dragData, currentTarget, x, y)

Runs as you drag. currentTarget is the DOM element you're currently dragging over; x and y are the current position.

onDragEnd(dragData, currentTarget, x, y)

When you drop.

onDrop(e)

Triggered after a drop onto a compatible DropTarget. This gets passed an event object, see onDrop Event Data.


DropTarget Props

targetKey

Optional string to specify which DragDropContainers this target will accept.

dropData

Data to be provided to the DragDropContainer when it is dropped on the target.

highlightClassName

CSS classname to apply when a compatible DragDropContainer is hovering over the DropTarget. Defaults to highlighted. Set to empty string if you do not want any highlight behavior.

DropTarget Callbacks

All optional; specify in props.

onDragEnter(e), onDragLeave(e), onHit(e)

The event e contains

{
    dragData: [whatever you put in the dragData prop for DragDropContainer]
    dragElem: [reference to the DOM element being dragged]
    containerElem: [reference to the DragDropContainer DOM element]
    sourceElem: [reference to the DOM element containing children of DragDropContainer]
}

Development

To view locally, clone the repository then

$ npm run install
$ npm run build
$ npm run watch

The demo will run on http://localhost:8080/

File locations:

/src    Source code for components
/demo   Source code for demo
/lib/bundle.js  Transpiled output
/public   Demo files, compiled

License

MIT License

Copyright (c) 2017.

Comments
  • Drag Container not working on Safari

    Drag Container not working on Safari

    I created some components using DragDropContainer. So far, all was working great but it seems that is not working on any Safari version. Is the component compatible with Safari?

    opened by noeliasfranco 8
  • Add DragDropContainer data to onDrop Callback

    Add DragDropContainer data to onDrop Callback

    onDrop: Callback must also receive in its object argument the data of DragDropContainer

    this way we can easily in a single event know wich DragDropContainer.Data was dragged to wich DropTarget.Data

    I can go around it with something like:

      dropOk = (dragData, dropData) => {
        console.log("draggable data", dragData, "targed data", dropData);
       
        // rest.changeElementToList(dragData.id, dropData.id);
      };
    
    
    
     <DragDropContainer
              dragData={{ id: 1 }}
              onDrop={e => this.dropOk({id: 1}, e.dropData)}
            >
              <span>dragbable 1</span>
      </DragDropContainer>
    
    
    <DropTarget dropData={{ id: "list_todo" }}>
              <div>Todo List</div>
      </DropTarget>
    
    <DropTarget dropData={{ id: "list_done" }}>
              <div>Done List</div>
      </DropTarget>
    
    
    
    opened by herbertpimentel 3
  • Bump eslint from 3.19.0 to 4.18.2

    Bump eslint from 3.19.0 to 4.18.2

    Bumps eslint from 3.19.0 to 4.18.2.

    Release notes

    Sourced from eslint's releases.

    v4.18.2

    • 6b71fd0 Fix: [email protected], because 4.0.3 needs "ajv": "^6.0.1" (#10022) (Mathieu Seiler)
    • 3c697de Chore: fix incorrect comment about linter.verify return value (#10030) (Teddy Katz)
    • 9df8653 Chore: refactor parser-loading out of linter.verify (#10028) (Teddy Katz)
    • f6901d0 Fix: remove catastrophic backtracking vulnerability (fixes #10002) (#10019) (Jamie Davis)
    • e4f52ce Chore: Simplify dataflow in linter.verify (#10020) (Teddy Katz)
    • 33177cd Chore: make library files non-executable (#10021) (Teddy Katz)
    • 558ccba Chore: refactor directive comment processing (#10007) (Teddy Katz)
    • 18e15d9 Chore: avoid useless catch clauses that just rethrow errors (#10010) (Teddy Katz)
    • a1c3759 Chore: refactor populating configs with defaults in linter (#10006) (Teddy Katz)
    • aea07dc Fix: Make max-len ignoreStrings ignore JSXText (fixes #9954) (#9985) (Rachael Sim)

    v4.18.1

    • f417506 Fix: ensure no-await-in-loop reports the correct node (fixes #9992) (#9993) (Teddy Katz)
    • 3e99363 Docs: Fixed typo in key-spacing rule doc (#9987) (Jaid)
    • 7c2cd70 Docs: deprecate experimentalObjectRestSpread (#9986) (Toru Nagashima)

    v4.18.0

    • 70f22f3 Chore: Apply memoization to config creation within glob utils (#9944) (Kenton Jacobsen)
    • 0e4ae22 Update: fix indent bug with binary operators/ignoredNodes (fixes #9882) (#9951) (Teddy Katz)
    • 47ac478 Update: add named imports and exports for object-curly-newline (#9876) (Nicholas Chua)
    • e8efdd0 Fix: support Rest/Spread Properties (fixes #9885) (#9943) (Toru Nagashima)
    • f012b8c Fix: support Async iteration (fixes #9891) (#9957) (Toru Nagashima)
    • 74fa253 Docs: Clarify no-mixed-operators options (fixes #9962) (#9964) (Ivan Hayes)
    • 426868f Docs: clean up key-spacing docs (fixes #9900) (#9963) (Abid Uzair)
    • 4a6f22e Update: support eslint-disable-* block comments (fixes #8781) (#9745) (Erin)
    • 777283b Docs: Propose fix typo for function (#9965) (John Eismeier)
    • bf3d494 Docs: Fix typo in max-len ignorePattern example. (#9956) (Tim Martin)
    • d64fbb4 Docs: fix typo in prefer-destructuring.md example (#9930) (Vse Mozhet Byt)
    • f8d343f Chore: Fix default issue template (#9946) (Kai Cataldo)

    v4.17.0

    • 1da1ada Update: Add "multiline" type to padding-line-between-statements (#8668) (Matthew Bennett)
    • bb213dc Chore: Use messageIds in some of the core rules (#9648) (Jed Fox)
    • 1aa1970 Docs: remove outdated rule naming convention (#9925) (Teddy Katz)
    • 3afaff6 Docs: Add prefer-destructuring variable reassignment example (#9873) (LePirlouit)
    • d20f6b4 Fix: Typo in error message when running npm (#9866) (Maciej Kasprzyk)
    • 51ec6a7 Docs: Use GitHub Multiple PR/Issue templates (#9911) (Kai Cataldo)
    • dc80487 Update: space-unary-ops uses astUtils.canTokensBeAdjacent (fixes #9907) (#9906) (Kevin Partington)
    • 084351b Docs: Fix the messageId example (fixes #9889) (#9892) (Jed Fox)
    • 9cbb487 Docs: Mention the globals key in the no-undef docs (#9867) (Dan Dascalescu)

    v4.16.0

    • e26a25f Update: allow continue instead of if wrap in guard-for-in (fixes #7567) (#9796) (Michael Ficarra)
    • af043eb Update: Add NewExpression support to comma-style (#9591) (Frazer McLean)
    • 4f898c7 Build: Fix JSDoc syntax errors (#9813) (Matija Marohnić)
    • 13bcf3c Fix: Removing curly quotes in no-eq-null report message (#9852) (Kevin Partington)
    • b96fb31 Docs: configuration hierarchy for CLIEngine options (fixes #9526) (#9855) (PiIsFour)
    • 8ccbdda Docs: Clarify that -c configs merge with .eslintrc.* (fixes #9535) (#9847) (Kevin Partington)
    • 978574f Docs: Fix examples for no-useless-escape (#9853) (Toru Kobayashi)
    Changelog

    Sourced from eslint's changelog.

    v4.18.2 - March 2, 2018

    • 6b71fd0 Fix: [email protected], because 4.0.3 needs "ajv": "^6.0.1" (#10022) (Mathieu Seiler)
    • 3c697de Chore: fix incorrect comment about linter.verify return value (#10030) (Teddy Katz)
    • 9df8653 Chore: refactor parser-loading out of linter.verify (#10028) (Teddy Katz)
    • f6901d0 Fix: remove catastrophic backtracking vulnerability (fixes #10002) (#10019) (Jamie Davis)
    • e4f52ce Chore: Simplify dataflow in linter.verify (#10020) (Teddy Katz)
    • 33177cd Chore: make library files non-executable (#10021) (Teddy Katz)
    • 558ccba Chore: refactor directive comment processing (#10007) (Teddy Katz)
    • 18e15d9 Chore: avoid useless catch clauses that just rethrow errors (#10010) (Teddy Katz)
    • a1c3759 Chore: refactor populating configs with defaults in linter (#10006) (Teddy Katz)
    • aea07dc Fix: Make max-len ignoreStrings ignore JSXText (fixes #9954) (#9985) (Rachael Sim)

    v4.18.1 - February 20, 2018

    • f417506 Fix: ensure no-await-in-loop reports the correct node (fixes #9992) (#9993) (Teddy Katz)
    • 3e99363 Docs: Fixed typo in key-spacing rule doc (#9987) (Jaid)
    • 7c2cd70 Docs: deprecate experimentalObjectRestSpread (#9986) (Toru Nagashima)

    v4.18.0 - February 16, 2018

    • 70f22f3 Chore: Apply memoization to config creation within glob utils (#9944) (Kenton Jacobsen)
    • 0e4ae22 Update: fix indent bug with binary operators/ignoredNodes (fixes #9882) (#9951) (Teddy Katz)
    • 47ac478 Update: add named imports and exports for object-curly-newline (#9876) (Nicholas Chua)
    • e8efdd0 Fix: support Rest/Spread Properties (fixes #9885) (#9943) (Toru Nagashima)
    • f012b8c Fix: support Async iteration (fixes #9891) (#9957) (Toru Nagashima)
    • 74fa253 Docs: Clarify no-mixed-operators options (fixes #9962) (#9964) (Ivan Hayes)
    • 426868f Docs: clean up key-spacing docs (fixes #9900) (#9963) (Abid Uzair)
    • 4a6f22e Update: support eslint-disable-* block comments (fixes #8781) (#9745) (Erin)
    • 777283b Docs: Propose fix typo for function (#9965) (John Eismeier)
    • bf3d494 Docs: Fix typo in max-len ignorePattern example. (#9956) (Tim Martin)
    • d64fbb4 Docs: fix typo in prefer-destructuring.md example (#9930) (Vse Mozhet Byt)
    • f8d343f Chore: Fix default issue template (#9946) (Kai Cataldo)

    v4.17.0 - February 2, 2018

    • 1da1ada Update: Add "multiline" type to padding-line-between-statements (#8668) (Matthew Bennett)
    • bb213dc Chore: Use messageIds in some of the core rules (#9648) (Jed Fox)
    • 1aa1970 Docs: remove outdated rule naming convention (#9925) (Teddy Katz)
    • 3afaff6 Docs: Add prefer-destructuring variable reassignment example (#9873) (LePirlouit)
    • d20f6b4 Fix: Typo in error message when running npm (#9866) (Maciej Kasprzyk)
    • 51ec6a7 Docs: Use GitHub Multiple PR/Issue templates (#9911) (Kai Cataldo)
    • dc80487 Update: space-unary-ops uses astUtils.canTokensBeAdjacent (fixes #9907) (#9906) (Kevin Partington)
    • 084351b Docs: Fix the messageId example (fixes #9889) (#9892) (Jed Fox)
    • 9cbb487 Docs: Mention the globals key in the no-undef docs (#9867) (Dan Dascalescu)

    v4.16.0 - January 19, 2018

    • e26a25f Update: allow continue instead of if wrap in guard-for-in (fixes #7567) (#9796) (Michael Ficarra)
    • af043eb Update: Add NewExpression support to comma-style (#9591) (Frazer McLean)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 2
  • Not working...?

    Not working...?

    Sorry if my question is dumb...I just started learning React a couple days ago. When I run the code below, I can drag "Drag me!", but I can not drag it onto "I'm a valid target...". Also when I load the page, console instantly shows "test", instead of after dragging and dropping "Drag me!"

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { DragDropContainer, DropTarget } from 'react-drag-drop-container';
    
    class Game extends React.Component {
        render(){
            return(
                <div className="game">
                     <DragDropContainer targetKey="foo" onDrop={console.log("test")}>
                        <div>Drag Me!</div>
                    </DragDropContainer>
                    <DropTarget targetKey="foo" >
                        <p>I'm a valid drop target for the object above since we both have the same targetKey!</p>
                    </DropTarget>
                </div>
                )
        }
    }
    
    ReactDOM.render(
      <Game />,
      document.getElementById('root')
    );
    
    opened by ktakeyama12 2
  •  fix shifting when a transform scale is applied to draggable element

    fix shifting when a transform scale is applied to draggable element

    Hi, Dragged element didn't follow the drag if a "transform" related to size was applied to the element (or a parent), shifting X transform ratio -> 20px drag resulting in 50px if transform( scale(2.5)) applied

    This fix is surely not perfect cause i couldn't test all cases (hovering resized element e.g), but in the classic case, it did the job for me.

    Thanks for this great lib, Hope this could improve it a little bit. Boimb.

    opened by Boimb 2
  • dragged element hidden if wrapper has overflow:auto in css

    dragged element hidden if wrapper has overflow:auto in css

    I receive a list to drag from, but sometimes the list is 2 screens high, so I made a containing div with an overflow:auto. The problem is that when I do that, even if I change the zIndex value of the DragDropContainer to 10 millions, it still disappears when it passes over the scrollbar. Is there some way to fix that?

    P.S. I've already tried it on your demo page, I've set the food class to have an overflow:auto, and the food icons disappear when they get out of their containing div. HELP please.

    opened by repunck 2
  • Bump loader-utils, babel-loader and webpack

    Bump loader-utils, babel-loader and webpack

    Bumps loader-utils to 1.4.1 and updates ancestor dependencies loader-utils, babel-loader and webpack. These dependencies need to be updated together.

    Updates loader-utils from 1.4.0 to 1.4.1

    Release notes

    Sourced from loader-utils's releases.

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    Changelog

    Sourced from loader-utils's changelog.

    1.4.1 (2022-11-07)

    Bug Fixes

    Commits

    Updates babel-loader from 6.4.1 to 9.1.0

    Release notes

    Sourced from babel-loader's releases.

    v9.1.0

    New features

    Full Changelog: https://github.com/babel/babel-loader/compare/v9.0.1...v9.1.0

    v9.0.1

    Bug Fixes

    Full Changelog: https://github.com/babel/babel-loader/compare/v9.0.0...v9.0.1

    v9.0.0

    What's Changed

    New Contributors

    Full Changelog: https://github.com/babel/babel-loader/compare/v8.2.5...v9.0.0

    v8.3.0

    New features

    Full Changelog: https://github.com/babel/babel-loader/compare/v8.2.5...v8.3.0

    v8.2.5

    What's Changed

    New Contributors

    Full Changelog: https://github.com/babel/babel-loader/compare/v8.2.4...v8.2.5

    v8.2.4

    What's Changed

    Thanks @​loveDstyle, @​stianjensen and @​pathmapper for your first PRs!

    8.2.3

    ... (truncated)

    Changelog

    Sourced from babel-loader's changelog.

    Changelog

    For changes in version v7.0.0 and up please go to release

    Old Changelog

    Commits
    Maintainer changes

    This version was pushed to npm by nicolo-ribaudo, a new releaser for babel-loader since your current version.


    Updates webpack from 2.7.0 to 5.74.0

    Release notes

    Sourced from webpack's releases.

    v5.74.0

    Features

    • add resolve.extensionAlias option which allows to alias extensions
      • This is useful when you are forced to add the .js extension to imports when the file really has a .ts extension (typescript + "type": "module")
    • add support for ES2022 features like static blocks
    • add Tree Shaking support for ProvidePlugin

    Bugfixes

    • fix persistent cache when some build dependencies are on a different windows drive
    • make order of evaluation of side-effect-free modules deterministic between concatenated and non-concatenated modules
    • remove left-over from debugging in TLA/async modules runtime code
    • remove unneeded extra 1s timestamp offset during watching when files are actually untouched
      • This sometimes caused an additional second build which are not really needed
    • fix shareScope option for ModuleFederationPlugin
    • set "use-credentials" also for same origin scripts

    Performance

    • Improve memory usage and performance of aggregating needed files/directories for watching
      • This affects rebuild performance

    Extensibility

    • export HarmonyImportDependency for plugins

    v5.73.0

    Features

    • add options for default dynamicImportMode and prefetch and preload
    • add support for import { createRequire } from "module" in source code

    Bugfixes

    • fix code generation of e. g. return"field"in Module
    • fix performance of large JSON modules
    • fix performance of async modules evaluation

    Developer Experience

    • export PathData in typings
    • improve error messages with more details

    v5.72.1

    Bugfixes

    • fix __webpack_nonce__ with HMR
    • fix in operator in some cases

    ... (truncated)

    Commits

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump url-parse from 1.4.3 to 1.5.7

    Bump url-parse from 1.4.3 to 1.5.7

    Bumps url-parse from 1.4.3 to 1.5.7.

    Commits
    • 8b3f5f2 1.5.7
    • ef45a13 [fix] Readd the empty userinfo to url.href (#226)
    • 88df234 [doc] Add soft deprecation notice
    • 78e9f2f [security] Fix nits
    • e6fa434 [security] Add credits for incorrect handling of userinfo vulnerability
    • 4c9fa23 1.5.6
    • 7b0b8a6 Merge pull request #223 from unshiftio/fix/at-sign-handling-in-userinfo
    • e4a5807 1.5.5
    • 193b44b [minor] Simplify whitespace regex
    • 319851b [fix] Remove CR, HT, and LF
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump follow-redirects from 1.5.7 to 1.14.7

    Bump follow-redirects from 1.5.7 to 1.14.7

    Bumps follow-redirects from 1.5.7 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump url-parse from 1.4.3 to 1.5.3

    Bump url-parse from 1.4.3 to 1.5.3

    Bumps url-parse from 1.4.3 to 1.5.3.

    Commits
    • ad44493 [dist] 1.5.3
    • c798461 [fix] Fix host parsing for file URLs (#210)
    • 201034b [dist] 1.5.2
    • 2d9ac2c [fix] Sanitize only special URLs (#209)
    • fb128af [fix] Use 'null' as origin for non special URLs
    • fed6d9e [fix] Add a leading slash only if the URL is special
    • 94872e7 [fix] Do not incorrectly set the slashes property to true
    • 81ab967 [fix] Ignore slashes after the protocol for special URLs
    • ee22050 [ci] Use GitHub Actions
    • d2979b5 [fix] Special case the file: protocol (#204)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Problems writing unit tests

    Problems writing unit tests

    Hi, awesome component. It works like a charm. 🙆‍♂️

    Though, I'm having a hard time trying to write a working test for the drag-and-drop part using Jest and Testing-Library.

    Did some of you guys managed to write a unit test?

    opened by maestrokame 1
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Drag element does not reset when dropping not on target

    Drag element does not reset when dropping not on target

    Hello, looking at the demo I saw that the item's position is being reset after dropping anywhere outside the target

    demo

    But in my implementation somehow the item's position is not being reset when directly dropping outside of the target Clicking the dragged item once will reset the position, but the original element is still hidden, making the layout weird when trying to resize the view area (it seems that the ghost/drag element is still visible and the parent element is still invisible)

    implementation

    Implementation: https://codesandbox.io/s/drag-and-drop-heqsqx

    Thank you for the library and I hope you have a great day!

    opened by achmad-firdaus-vpn 0
  • Bump loader-utils, babel-loader and webpack

    Bump loader-utils, babel-loader and webpack

    Bumps loader-utils to 1.4.2 and updates ancestor dependencies loader-utils, babel-loader and webpack. These dependencies need to be updated together.

    Updates loader-utils from 1.4.0 to 1.4.2

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    Commits

    Updates babel-loader from 6.4.1 to 9.1.0

    Release notes

    Sourced from babel-loader's releases.

    v9.1.0

    New features

    Full Changelog: https://github.com/babel/babel-loader/compare/v9.0.1...v9.1.0

    v9.0.1

    Bug Fixes

    Full Changelog: https://github.com/babel/babel-loader/compare/v9.0.0...v9.0.1

    v9.0.0

    What's Changed

    New Contributors

    Full Changelog: https://github.com/babel/babel-loader/compare/v8.2.5...v9.0.0

    v8.3.0

    New features

    Full Changelog: https://github.com/babel/babel-loader/compare/v8.2.5...v8.3.0

    v8.2.5

    What's Changed

    New Contributors

    Full Changelog: https://github.com/babel/babel-loader/compare/v8.2.4...v8.2.5

    v8.2.4

    What's Changed

    Thanks @​loveDstyle, @​stianjensen and @​pathmapper for your first PRs!

    8.2.3

    ... (truncated)

    Changelog

    Sourced from babel-loader's changelog.

    Changelog

    For changes in version v7.0.0 and up please go to release

    Old Changelog

    Commits
    Maintainer changes

    This version was pushed to npm by nicolo-ribaudo, a new releaser for babel-loader since your current version.


    Updates webpack from 2.7.0 to 5.75.0

    Release notes

    Sourced from webpack's releases.

    v5.75.0

    Bugfixes

    • experiments.* normalize to false when opt-out
    • avoid NaN%
    • show the correct error when using a conflicting chunk name in code
    • HMR code tests existance of window before trying to access it
    • fix eval-nosources-* actually exclude sources
    • fix race condition where no module is returned from processing module
    • fix position of standalong semicolon in runtime code

    Features

    • add support for @import to extenal CSS when using experimental CSS in node
    • add i64 support to the deprecated WASM implementation

    Developer Experience

    • expose EnableWasmLoadingPlugin
    • add more typings
    • generate getters instead of readonly properties in typings to allow overriding them

    v5.74.0

    Features

    • add resolve.extensionAlias option which allows to alias extensions
      • This is useful when you are forced to add the .js extension to imports when the file really has a .ts extension (typescript + "type": "module")
    • add support for ES2022 features like static blocks
    • add Tree Shaking support for ProvidePlugin

    Bugfixes

    • fix persistent cache when some build dependencies are on a different windows drive
    • make order of evaluation of side-effect-free modules deterministic between concatenated and non-concatenated modules
    • remove left-over from debugging in TLA/async modules runtime code
    • remove unneeded extra 1s timestamp offset during watching when files are actually untouched
      • This sometimes caused an additional second build which are not really needed
    • fix shareScope option for ModuleFederationPlugin
    • set "use-credentials" also for same origin scripts

    Performance

    • Improve memory usage and performance of aggregating needed files/directories for watching
      • This affects rebuild performance

    Extensibility

    • export HarmonyImportDependency for plugins

    v5.73.0

    ... (truncated)

    Commits

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump eventsource from 1.0.7 to 1.1.1

    Bump eventsource from 1.0.7 to 1.1.1

    Bumps eventsource from 1.0.7 to 1.1.1.

    Changelog

    Sourced from eventsource's changelog.

    1.1.1

    • Do not include authorization and cookie headers on redirect to different origin (#273 Espen Hovlandsdal)

    1.1.0

    • Improve performance for large messages across many chunks (#130 Trent Willis)
    • Add createConnection option for http or https requests (#120 Vasily Lavrov)
    • Support HTTP 302 redirects (#116 Ryan Bonte)
    • Prevent sequential errors from attempting multiple reconnections (#125 David Patty)
    • Add new to correct test (#111 Stéphane Alnet)
    • Fix reconnections attempts now happen more than once (#136 Icy Fish)
    Commits
    • aa7a408 1.1.1
    • 56d489e chore: rebuild polyfill
    • 4a951e5 docs: update history for 1.1.1
    • f9f6416 fix: strip sensitive headers on redirect to different origin
    • 9dd0687 1.1.0
    • 49497ba Update history for 1.1.0 (#146)
    • 3a38537 Update history for #136
    • 46fe04e Merge pull request #136 from icy-fish/master
    • 9a4190f Fix issue: reconnection only happends for 1 time after connection drops
    • 61e1b19 test: destroy both proxied request and response on close
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Ghost position error if drag element is inside a rotated div

    Ghost position error if drag element is inside a rotated div

    Hi, as mentioned in title, if a drag element is inside a div that has been rotated, drop occurs with no problems (x & y of touch are correct), but ghost image moves in different strange ways... As a test, I tried changing ghost position to 0, 0 but it doesn't changes anything. Thanks in advance for the help.

    opened by eldanet 0
Releases(6.1.1)
Owner
Peter Hollingsworth
Peter Hollingsworth
Drag and drop page builder and CMS for React, Vue, Angular, and more

Drag and drop page builder and CMS for React, Vue, Angular, and more Use your code components and the stack of your choice. No more being pestered for

Builder.io 4.1k Dec 2, 2022
Beautiful and accessible drag and drop for lists with React

react-beautiful-dnd (rbd) Beautiful and accessible drag and drop for lists with React Play with this example if you want! Core characteristics Beautif

Atlassian 28.7k Dec 1, 2022
🔀 Drag and drop for your React lists and tables. Accessible. Tiny.

react-movable See all the other examples and their source code! Installation yarn add react-movable Usage import * as React from 'react'; import { Li

Vojtech Miksu 1.3k Nov 19, 2022
React drag and drop sort support flex layout and nested.

react-flex-dnd React drag and drop sort support flex layout and nested. This package using hooks, note that your React version is above 16.8 :) Why fl

lvshihao 7 Nov 14, 2022
Drag and Drop for React

React DnD Drag and Drop for React. See the docs, tutorials and examples on the website: http://react-dnd.github.io/react-dnd/ See the changelog on the

React DnD 18.6k Dec 5, 2022
:ok_hand: Drag and drop so simple it hurts

Drag and drop so simple it hurts Official React wrapper for dragula. Demo Try out the demo! Install You can get it on npm. npm install react-dragula -

Nicolás Bevacqua 976 Nov 26, 2022
Drag and Drop for React

React DnD Drag and Drop for React. See the docs, tutorials and examples on the website: http://react-dnd.github.io/react-dnd/ See the changelog on the

React DnD 18.6k Dec 6, 2022
A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

Claudéric Demers 6.2k Dec 6, 2022
Drag and Drop for React

Drag and Drop for React

React DnD 18.5k Dec 2, 2022
Light React Drag & Drop files and images library styled by styled-components

Light React Drag & Drop files and images library styled by styled-components

null 138 Dec 7, 2022
React Drag and Drop file input

React Drag and Drop file input

Tran Anh Tuat 43 Nov 8, 2022
A directive based drag and drop container for solid-js

A directive based drag and drop container for solid-js

Isaac Hagoel 52 Oct 31, 2022
React drag and drop framework with inbuilt virtualizing scrollbars.

About us This library was made by Forecast - powered by AI, Forecast is supporting your work process with a complete Resource & Project Management pla

Forecast 51 Sep 21, 2022
🦋 Component for building file fields - from basic file inputs to drag and drop image galleries.

?? react-butterfiles A small component for building file upload fields of any type, for example a simple file upload button or an image gallery field

Adrian Smijulj 45 Aug 26, 2022
Drag and Drop library for React.

react-tiny-dnd Drag and Drop library for React. Demo Install via npm npm install react-tiny-dnd or yarn add react-tiny-dnd Features Vertical lists Eas

Rafael Hovhannisyan 27 Nov 27, 2022
Creating an app using Drag and Drop with React without libraries 🤏

Creating an app using Drag and Drop with React without libraries ?? ! This time, we are going to implement the functionality to do a Drag & Drop with

Franklin Martinez 5 Sep 23, 2022
Simple HTML5 drag-drop zone with React.js.

react-dropzone Simple React hook to create a HTML5-compliant drag'n'drop zone for files. Documentation and examples at https://react-dropzone.js.org.

null 9.3k Nov 29, 2022
example how to use react-dropzone for drag 'n drop uploader

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Hendra_Adri 1 Nov 5, 2021
Taskboard with drag'n drop feature. Built w/ React, TypeScript

Drag & Drop Taskboard A taskboard application with drag and drop feature. Live demo is here. Tech Stack Language: TypeScript UI-Components: Ant Design

Onur Önder 36 Nov 26, 2022