I'm getting this error when compiling my react project with gulp, tought it was a linting problem but apparently not.

ReferenceError: document is not defined

I have a dynamically ordered array of data entries, and how I want it to work is initially populate it with the dataOrder and after the order is changed by dragula to save the new order to dataOrder. This would trigger a re-render of the list with the correct order.

However, when the drop event is detected, the handleReorder runs setState(dataOrder), and I think what happens is dragula modifies the display, but then the setState modifies the underlying order resulting in a displayed list that's out of order with the underlying data.

This seems like a common use-case, so I'm wondering what's the best practice for dealing with this? I've already figured out one potential solution, but it's kinda hacky and not the react way of writing the code.

I've included the example code to demonstrate what I'm talking about.

*Note using flux, redux may potentially solve this issue since it triggers whole app re-render.

import React from 'react';
import Dragula from 'react-dragula';

export default class App extends React.Component {
  constructor(props) {
      super(props);
      this.state={
          dataOrder: [1,2,3,4,5],
      };
      this.start = 0;
      this.end = 0;
      this.getIndexInParent = this.getIndexInParent.bind(this);
      this.dragulaDecorator = this.dragulaDecorator.bind(this);
      this.displayEntries = this.displayEntries.bind(this);
      this.handleReorder = this.handleReorder.bind(this);
  }

  handleReorder(start, end) {
    console.log(start,end)

    var dataOrder = this.state.dataOrder;

    dataOrder.move = function (old_index, new_index) {
        if (new_index >= this.length) {
            var k = new_index - this.length;
            while ((k--) + 1) {
                this.push(undefined);
            }
        }
        this.splice(new_index, 0, this.splice(old_index, 1)[0]);
        return this; // for testing purposes
    };

    var newList = dataOrder.move(start,end)

    this.setState({ dataOrder: newList})
    console.log(this.state.dataOrder)
  }

  getIndexInParent(el) {
    return Array.from(el.parentNode.children).indexOf(el)
  }

  dragulaDecorator(componentBackingInstance) {
      if (componentBackingInstance) {
        var options = {
          moves: function (el, container, handle, sibling) {
              let pickedLocation = this.getIndexInParent(el);
              this.start = pickedLocation;
              return handle.classList.contains('handle');
          }.bind(this)
      };

        var drake = Dragula([componentBackingInstance], options);

        drake.on('drop', (el, target, source, sibling) => {
          let droppedLocation = this.getIndexInParent(el);
          this.end = droppedLocation;
          this.handleReorder(this.start, this.end);
        });
      }}

    displayEntries() {
      var dataOrder = this.state.dataOrder;
      var results = dataOrder.map( (val) => {
        return <div><span className='handle'>XXX</span> {val.toString().repeat(val)} </div>
      })
      return results;
    }

  render () {

    return (<div className='container' ref={this.dragulaDecorator}>
      {this.displayEntries()}
    </div>)
  }
}

I want to know properly what different between react-dragula and normal dragula. If I use normal dragula in a React project, not use react version of it, then what is the side effect?

Just curious, because I used normal version and still found nothing wrong. Thank you.

Not exactly sure why, maybe it's browserify bug, but for some reason when I try to browserify and this module is included it will attempt to run the "reactify" transform. Since "reactify" is a devdependency and I use babel instead it doesn't find it and errors out.

Cannot find module 'reactify' from '/.../node_modules/react-dragula'

A quick fix would just be making reactify a regular dependency or not using the package.json browserify fields.

I am using react-dragula with React v16.13.0 along with TypeScript.

This is the error I get:

Uncaught ReferenceError: global is not defined
    at Object../node_modules/custom-event/index.js (index.js:2)
    at __webpack_require__ (bootstrap:725)
    at fn (bootstrap:100)
    at Object../node_modules/crossvent/src/crossvent.js (crossvent.js:3)
    at __webpack_require__ (bootstrap:725)
    at fn (bootstrap:100)
    at Object../node_modules/dragula/dragula.js (dragula.js:4)
    at __webpack_require__ (bootstrap:725)
    at fn (bootstrap:100)
    at Object../node_modules/react-dragula/react-dragula.js (react-dragula.js:3)

When clone is set to true from container1 to container2, the drop function will not return a referenced React Component but rather the source el as either an object or html wrapping the object. Is there any way to reference the replacement of el correctly to render the React Component in place of el on drop?

Use Case: container1 holds a preview image and when dropped into container2, the image reference creates the React Component on drop.

drake.on('drop', function(el, target, source, sibling) {
   if (source === container1) {
     var type = el.getAttributeNode('data-type').value;
     var ReactComponent = window[type + 'Component'];
     // variation A
     el = <ReactComponent/> //result -> [object][object]
     // variation B
     el.innerHTML = <ReactComponent/> //result -> <div>[object][object]</div>
     // variation C
     el.parentNode.replaceChild(<ReactComponent/>, el);
     //result -> Failed to execute 'replaceChild' on 'Node': parameter 1 is not of type 'Node'
     //Using React.createElement fails as well
});

I can't seem to get around any of these errors to create the element as an actual node to the DOM.

i have a react component that under some conditions , needs to disable the drag and drop abilities on some elements

so after the dragula component was instantiated with 3 containers how can i remove some of them ?

i tried using react's state and it didnt work , the decorator didnt update on setState

I noticed that react-dragula does not distinguish between a mousemove and click event. I saw that this was fixed in dragula: https://github.com/bevacqua/dragula/commit/301350208d46d8587e03481599050594223d6721 Are you working on a similar fix for react-dragula?

Is it necessary to have 'dragula' as a dependency of 'react-dragula'? It seems like the client could pass the "dragula" object to "react-dragula" and not have to deal with laggy updates.

Hi guys, just a weirdness I observed. I have a component which is draggable (you can drag & drop it somewhere) and inside of that component I have a simple select. When I try to open the select to see all the options it just does not work. It does not show the options. I guess it is not a desired behaviour because, well I am not able to change the value of the select. I am currently doing something like this to make this work:

moves: function(el, source, handle){
    if(handle.className.indexOf('exercise-collection-type') > -1) return false;
    else return true;
  } 

'exercise-collection-type' is a class of the select so I know that when I grab it by the select, I do not want to drag & drop. Is this ok or a bug? I can provide jsfiddle, but I guess the description is straight forward.

Thanks!

• missing ReactDOM import
• Alternative React implementation example using refs (ES2015 syntax)

Using ReactDOM.findDOMNode is discouraged by facebook

you can use ReactDOM.findDOMNode as an "escape hatch" but we don't recommend it since it breaks encapsulation

I'm providing an alternative React implementation using ES2015 / TypeScript syntax "using refs", actually it's the preferred (by facebook) "escape hatch" to underlaying DOM nodes: React: The ref Callback Attribute

import * as React from "react";
import * as ReactDOM from 'react-dom';
import Dragula from 'react-dragula';
export class App extends React.Component {
  render () {
    return <div className='container' ref={this.dragulaDecorator}>
      <div>Swap me around</div>
      <div>Swap her around</div>
      <div>Swap him around</div>
      <div>Swap them around</div>
      <div>Swap us around</div>
      <div>Swap things around</div>
      <div>Swap everything around</div>
    </div>;
  },
  dragulaDecorator = (componentBackingInstance) => {
    if (componentBackingInstance) {
      let options = { };
      Dragula([componentBackingInstance], options);
    }
  };
});
ReactDOM.render(<App />, document.getElementById('examples'));

I am working on react js app, and using react-dragula to sort the list rows. It's working fine on page reload but having an issue if coming from another page to this listing page. Basically it's having an issue with routing(because it works on page reload)

I am using below mention version of packages:: react-dragula: 1.1.17 react-router-dom: 5.2.0

This my code of list row::

import React, { Fragment } from "react";
  import Dragula from "react-dragula";
  import ListItem from 'Components/ListItem';
  
  class MyListComp extends React.Component {
  
  	/** variables */
  	drake = null;
  	containers = [];
  	sequence = [];
  
  	componentDidMount() {
  		this.renderDragDrop();
  	}
  	
  	renderDragDrop() {
  		this.drake = Dragula(this.containers, {
  			isContainer: function (el) {
  				return (el.id === "seq-drag");
  			},
  			moves: function (el, source, handle, sibling) {
  				return (handle.id === "seqSortBtn");
  			},
  		});
  		this.drake.on("drop", async (el, target, source, sibling) => {
  			if (target) {
  				var ids = [];
  				var parentElement = document.querySelector("#" + target.id); // Select parent element
  				var childElements = parentElement.querySelectorAll(".seq-el"); // Select child elements
  				for (var i = 0; i < childElements.length; i++) {
  					let objToPush = {
  						_id: childElements[i].getAttribute("id"),
  						seq: i + 1,
  					}
  					ids.push(objToPush);
  				}
  				this.sequence = ids; // store in variable;
  			}
  		});
  	}
  
  	render() {
  		const { lists } = this.props;
  		const dragulaDecorator = (componentBackingInstance) => {
  			if (componentBackingInstance) {
  				this.containers.push(componentBackingInstance)
  			}
  		};
  		return (
  			<Fragment>
  				<div id="seq-drag" ref={dragulaDecorator}>
  					{lists && lists.length > 0 && lists.map((seq, key)=>(
  						<ListItem key={key} seq={seq} />
  					))}
  				</div>		
  			</Fragment>
  		)
  	}
  }
  
  export default MyListComp;

Please suggest someone what is problem while loading component via routing using react-dragula? and is there any issue in react-dragula or we can resolve this using some custom code, please suggest.

Bumps react from 0.13.3 to 16.13.1.

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.

I am working on react js app where I used "react-dragula" to drag and drop the list items. I am showing the preview of the child component html inside the parent wrapper component. After dropping an element my html is not render properly. I have no idea whether it is because of Dragula or there is some other issue. After dropping the list item I am updating list values according to the element index and updating the json value in parent component which returns new updated data in props, and then I am re rendering the child component. But it shows me old html it's not re rendering the html of child component using updated props return by parent component.

Here is my code::

class App extends React.Component {
	drake = null;
	socialContainers = [];

	/** lifecycle method */
	componentDidMount() {
		this.drake = Dragula(this.socialContainers, {
			isContainer: function (el) {
				return (el.id === 'social-container');
			},
			moves: function (el, source, handle, sibling) {
				return (handle.id === "socialSortBtn");
			},
			accepts: function (el, target, source, sibling) {
				return (target.id === 'social-container' && source.id === 'social-container');
			},
		});
		this.drake.on('drop', (el, target, source, sibling) => {
			el.style.cursor = "grab";
			let oldIndex = el.dataset.index
			let type = el.dataset.type
			let iconIndx = Array.prototype.indexOf.call(target.children, el);
			let targetIndex = iconIndx > 0 ? iconIndx : 0;
			if (type) {
				let content = {}
				content.reOrder = true;
				content.oldIndex = oldIndex;
				this.props.callback(content, 'content', targetIndex)
			}
		});
		this.drake.on('drag', (el, source) => {
			el.style.cursor="grabbing";
		})
	}

	updateLinkText(val, index) {
		const { data, callback } = this.props;
		let textParsedHtml = new DOMParser().parseFromString(data.content[index].text, 'text/html');
		if (textParsedHtml.getElementsByTagName("a")[0]) {
			textParsedHtml.getElementsByTagName("a")[0].innerHTML = val;
		}
		let content = {}
		content.changeLinkTxt = true
		content.linkText = val
		content.linkTextHtml = textParsedHtml.body.innerHTML
		//update content
		callback(content, 'content', index)
	}

	onSelectShareOpt(selectedVal, selectedIndx, event) {
		event.stopPropagation();
		let socialObj = socialShareArr.find((obj) => obj.value === selectedVal)
		if (socialObj) {
			let htmlObj = this.getHTMLObj(socialObj);
			let content = {}
			content.active_social_icons = socialObj
			if(htmlObj) { content.content = htmlObj }
			// update content
			this.props.callback(content, 'content', selectedIndx)
		}	
	}

	isIconDisabled = (data, val) => {
		let found = false;
		found = data.some(function (obj) {
			if (obj.value === val) {
				return true;
			}
			return false;
		});
		return found;
	}

	renderSocialIcons(dragulaDecoratorRef) {
		const { data } = this.props;
		let socialIcons = data.activeIcons;
		if (!socialIcons) {
			return null
		}
		return (
			<Fragment>
				{socialIcons && socialIcons.length > 0 && socialIcons.map((activeIcon, index) => (
					<li key={index} data-index={index} data-type={activeIcon.value} className="mb-30">
						<div className="mr-2">
							<button data-toggle="tooltip" title="Drag to reorder" className="btn btn-primary btn-sm btn-icon" id="dragBtn"><span id="socialSortBtn" className="material-icons m-0">drag_indicator</span>
							</button>
						</div>
						<div className="mb-30">
							<img className="mr-2" src={activeIcon.icon} alt="social-icon" width="36" height="36" />
							<FormControl
								value={activeIcon.value}
								as="select"
								onChange={e => this.onSelectShareOpt(e.target.value, index, e)}
								custom
								size=''
							>
								{socialShareArr && socialShareArr.map((option, index) => (
									<option
										key={index}
										disabled={this.isIconDisabled(socialIcons, option.value)}
										value={option.value}
									>
										{option.label}
									</option>
								))}
							</FormControl>
						</div>
						<Form.Group>
							<Form.Label>Link Text</Form.Label>
							<TextInput
								value={activeIcon.linkText}
								onChange={(e) => this.updateLinkText(e.target.value, index)}
								wrapperClass="mx-10 mb-0"
							/>
						</Form.Group>
					</li>
				))}
			</Fragment>
		);
	}

	// main function
	render() {
		const { data } = this.props;
		const dragulaDecoratorRef = (componentBackingInstance) => {
			if (componentBackingInstance) {
				this.socialContainers.push(componentBackingInstance)
			}
		};
		return (
			<Fragment>
				{data &&
					<AppCard>
						<Card.Body>
							<div className="social-opt-container">
								<ul id='social-container' ref={dragulaDecoratorRef}>
									{this.renderSocialIcons(dragulaDecoratorRef)}
								</ul>
							</div>
						</Card.Body>
					</AppCard>
				}
			</Fragment>
		)
	}
}

export { App }

I have also tried to remove innerHTML of "<ul>" and then return new structure but in this case it returns nothing in html. Please check this once why this issue occurring.

I am using dragula container inside child component, but the drop event not occurs. I have tried every possible way but the drop event not occurs. I want to reorder my list on drag and drop.

This is my code.

import React, { Fragment } from 'react';
import { Tabs, Tab, Card } from 'react-bootstrap';
import Dragula from 'react-dragula';
import { AppCard } from '../../../../../Components/AppCard'

class App extends React.Component {
	drake = null;
	dragullaContainers = [];

	componentDidMount() {
		this.drake = Dragula(this.dragullaContainers, {
			isContainer: function (el) {
				if (el.id === 'social-container') {
					return true;
				}
				return false;
			},
			moves: function (el, source, handle, sibling) {
				if (handle.id === "socialSortBtn") {
					return true;
				}
				return false;
			},
			accepts: function (el, target, source, sibling) {
				return true; // elements can be dropped in any of the `containers` by default
			},

		});
		this.drake.on('drop', (el, target) => {
			// this event not occurs
			console.log('drop', el, target)
		});
		this.drake.on('drag', (el, source) => {
			console.log('drag', el)
		})
	}

	// main function
	render() {
		const { data } = this.props;
		const dragulaDecoratorRef = (componentBackingInstance) => {
			if (componentBackingInstance) {
				this.dragullaContainers.push(componentBackingInstance)
			}
		};
		return (
			<Fragment>
				{data ?
					<Tabs variant="pills" className="btn-group border rounded"  defaultActiveKey="content" id="tools-header">
						<Tab eventKey="content" title="Content" tabClassName="btn shadow-none">
							<AppCard>
								<Card.Body>
									<div>
										<ul id='social-container' ref={dragulaDecoratorRef}>
											{data.active_social_icons && data.active_social_icons.length > 0 && data.active_social_icons.map((activeIcon, index) => (
												<li key={index} data-index={index} className="d-flex mb-30">
													<div className="">
														<div className="mr-2">
															<button data-toggle="tooltip" title="Drag to reorder" className="btn btn-primary btn-sm btn-icon" id="dragBtn"><span id="socialSortBtn" className="material-icons m-0">drag_indicator</span>
															</button>
														</div>
														<div className="d-flex mb-30">List item</div>
													</div>
												</li>
											))}
										</ul>
									</div>
								</Card.Body>
							</AppCard>
						</Tab>
						<Tab eventKey="style" title="Style">
							tab2 content
						</Tab>
					</Tabs>
				:
				null
			}
			</Fragment>
		)
	}
}

export default App;

Please suggest why drop event is not occuring? I want to update list item position via drag and drop.

Bumps clean-css from 3.3.7 to 4.2.1.

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.