:ok_hand: Drag and drop so simple it hurts

Overview

logo.png

Drag and drop so simple it hurts

Official React wrapper for dragula.

Demo

demo.png

Try out the demo!

Install

You can get it on npm.

npm install react-dragula --save

Or bower, too.

bower install react-dragula --save

Usage

Refer to the documentation for dragula. The API for react-dragula is identical, but a few tiny tweaks were made around it so that it works out the box with React.

Example

Here's an example application using react and react-dragula.

var React = require('react');
var dragula = require('react-dragula');
var App = React.createClass({
  render: function () {
    return <div className='container'>
      <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>;
  },
  componentDidMount: function () {
    var container = React.findDOMNode(this);
    dragula([container]);
  }
});
React.render(<App />, document.getElementById('examples'));

Example using refs (ES2015 syntax)

Here's an example using refs (ES2015 syntax): 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'));

License

MIT

Comments
  • document is not defined

    document is not defined

    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

    opened by abFx 4
  • Conflicting display order update when combined with setState (Maybe bug)

    Conflicting display order update when combined with setState (Maybe bug)

    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>)
      }
    }
    
    opened by luojxxx 3
  • Different between react-dragula and dragula?

    Different between react-dragula and dragula?

    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.

    opened by hieuhlc 2
  • Reactify issue.

    Reactify issue.

    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.

    opened by DylanPiercey 2
  • Uncaught ReferenceError: global is not defined

    Uncaught ReferenceError: global is not defined

    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)
    
    opened by amanharwara 1
  • Cannot render React Component on Clone Drop

    Cannot render React Component on Clone Drop

    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.

    opened by michaelmcshinsky 1
  • how can i remove some containers from the dragula decorator ?

    how can i remove some containers from the dragula decorator ?

    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

    opened by EssamTarik 1
  • Fix simultaneous click and mousemove events fire as was done in dragula

    Fix simultaneous click and mousemove events fire as was done in dragula

    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?

    opened by Sonjabara 1
  • Update Dragula to 3.3.0

    Update Dragula to 3.3.0

    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.

    opened by rhys-vdw 1
  • Select in draggable component

    Select in draggable component

    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!

    opened by RassaLibre 1
  • Alternative React implementation example using refs (ES2015 syntax)

    Alternative React implementation example using refs (ES2015 syntax)

    • 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'));
    
    opened by piotrwitek 0
  • drake.on drop not working on routing change

    drake.on drop not working on routing change

    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.

    opened by ArchanaSharma95 0
  • Bump react from 0.13.3 to 16.13.1

    Bump react from 0.13.3 to 16.13.1

    Bumps react from 0.13.3 to 16.13.1.

    Release notes

    Sourced from react's releases.

    16.13.1 (March 19, 2020)

    React DOM

    • Fix bug in legacy mode Suspense where effect clean-up functions are not fired. This only affects users who use Suspense for data fetching in legacy mode, which is not technically supported. (@acdlite in #18238)
    • Revert warning for cross-component updates that happen inside class render lifecycles (componentWillReceiveProps, shouldComponentUpdate, and so on). (@gaearon in #18330)

    Artifacts

    16.13.0 (February 26, 2020)

    React

    • Warn when a string ref is used in a manner that's not amenable to a future codemod (@lunaruan in #17864)
    • Deprecate React.createFactory() (@trueadm in #17878)

    React DOM

    Concurrent Mode (Experimental)

    Artifacts

    Changelog

    Sourced from react's changelog.

    16.13.1 (March 19, 2020)

    React DOM

    • Fix bug in legacy mode Suspense where effect clean-up functions are not fired. This only affects users who use Suspense for data fetching in legacy mode, which is not technically supported. (@acdlite in #18238)
    • Revert warning for cross-component updates that happen inside class render lifecycles (componentWillReceiveProps, shouldComponentUpdate, and so on). (@gaearon in #18330)

    16.13.0 (February 26, 2020)

    React

    • Warn when a string ref is used in a manner that's not amenable to a future codemod (@lunaruan in #17864)
    • Deprecate React.createFactory() (@trueadm in #17878)

    React DOM

    Concurrent Mode (Experimental)

    16.12.0 (November 14, 2019)

    React DOM

    • Fix passive effects (useEffect) not being fired in a multi-root app. (@acdlite in #17347)

    React Is

    • Fix lazy and memo types considered elements instead of components (@bvaughn in #17278)

    16.11.0 (October 22, 2019)

    React DOM

    Commits
    Maintainer changes

    This version was pushed to npm by acdlite, a new releaser for react since your current version.


    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
  • On drop html is not render properly

    On drop html is not render properly

    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.

    opened by ArchanaSharma95 1
  • drake.on drop event not occurs react dragulla

    drake.on drop event not occurs react dragulla

    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.

    opened by ArchanaSharma95 1
  • Bump clean-css from 3.3.7 to 4.2.1

    Bump clean-css from 3.3.7 to 4.2.1

    Bumps clean-css from 3.3.7 to 4.2.1.

    Changelog

    Sourced from clean-css's changelog.

    4.2.1 / 2018-08-07

    • Fixes giving breakWith option via a string.

    4.2.0 / 2018-08-02

    • Adds process method for compatibility with optimize-css-assets-webpack-plugin.
    • Fixed issue #861 - new transition property optimizer.
    • Fixed issue #895 - ignoring specific styles.
    • Fixed issue #947 - selector based filtering.
    • Fixed issue #964 - adds configurable line breaks.
    • Fixed issue #986 - level 2 optimizations and CSS 4 colors.
    • Fixed issue #1000 - carriage return handling in tokenizer.
    • Fixed issue #1038 - font-variation-settings quoting.
    • Fixes ReDOS vulnerabilities in validator code.

    4.1.11 / 2018-03-06

    • Backports fixes to ReDOS vulnerabilities in validator code.

    4.1.10 / 2018-03-05

    • Fixed issue #988 - edge case in dropping default animation-duration.
    • Fixed issue #989 - edge case in removing unused at rules.
    • Fixed issue #1001 - corrupted tokenizer state.
    • Fixed issue #1006 - edge case in handling invalid source maps.
    • Fixed issue #1008 - edge case in breaking up font shorthand.

    4.1.9 / 2017-09-19

    • Fixed issue #971 - edge case in removing unused at rules.

    4.1.8 / 2017-09-02

    • Fixed issue #959 - regression in shortening long hex values.
    • Fixed issue #960 - better explanation of efficiency stat.
    • Fixed issue #965 - edge case in parsing comment endings.
    • Fixed issue #966 - remote @imports referenced from local ones.

    4.1.7 / 2017-07-14

    • Fixed issue #957 - 0% minification of width property.
    ... (truncated)
    Commits
    Maintainer changes

    This version was pushed to npm by jakub.pawlowicz, a new releaser for clean-css since your current version.


    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 ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major 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
Owner
Nicolás Bevacqua
🎉 Engineering @elastic 📚 Published @mjavascript 📔 Published @buildfirst ✍ Blog @ponyfoo ⛺ Organized @nodeconf @beerjs ⛵ Conference Speaker 🛬
Nicolás Bevacqua
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.2k Jan 1, 2023
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.9k Dec 31, 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 Dec 30, 2022
ReactJS drag and drop functionality for mouse and touch devices

DragDropContainer and DropTarget Live demo: peterh32.github.io/react-drag-drop-container Features Very easy to implement and understand. Works on mous

Peter Hollingsworth 142 Sep 26, 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.7k Jan 7, 2023
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.7k Jan 6, 2023
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.5k Jan 7, 2023
Drag and Drop for React

Drag and Drop for React

React DnD 18.7k Jan 4, 2023
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 143 Dec 28, 2022
React Drag and Drop file input

React Drag and Drop file input

Tran Anh Tuat 45 Dec 30, 2022
A directive based drag and drop container for solid-js

A directive based drag and drop container for solid-js

Isaac Hagoel 52 Dec 8, 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
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 37 Dec 16, 2022
"Drag to resize" (sizing) as React Component.

react-drag-sizing "Drag to resize" (sizing) as React Component Rewritten with TS & React-hooks Polyfill workaround with React < 16.8 Support both mous

Fritz Lin 13 Nov 7, 2022