New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

react-drag-drop-container

Package Overview
Dependencies
Maintainers
1
Versions
43
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-drag-drop-container - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

30

dist/react-drag-drop-container.js

@@ -75,7 +75,29 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.DragDropContainer = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){

}
// capture events
var elem = this.refs['drag_container'];
if (this.props.dragHandleClassName) {
var elems = elem.getElementsByClassName(this.props.dragHandleClassName);
for (var i = 0; i < elems.length; i++) {
this.addListeners(elems[i]);
}
} else {
this.addListeners(elem);
}
}
}, {
key: 'addListeners',
value: function addListeners(elem) {
var _this = this;
elem.addEventListener('mousedown', function (e) {
_this.handleMouseDown(e);
}, false);
elem.addEventListener('touchstart', function (e) {
_this.handleTouchStart(e);
}, false);
}
}, {
key: 'createEvent',
value: function createEvent(eventName, x, y) {
var _this = this;
var _this2 = this;

@@ -94,3 +116,3 @@ var evt;

'getData': function getData(arg) {
return arg === _this.props.dataKey ? _this.props.dragData : undefined;
return arg === _this2.props.dataKey ? _this2.props.dragData : undefined;
},

@@ -250,3 +272,3 @@ 'types': [this.props.dataKey]

'div',
{ style: styles, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart, ref: 'drag_container' },
{ style: styles, ref: 'drag_container' },
this.props.children,

@@ -278,2 +300,4 @@ ghost

dragHandleClassName: _react2['default'].PropTypes.string,
// callbacks (optional):

@@ -280,0 +304,0 @@ onDragging: _react2['default'].PropTypes.func,

2

dist/react-drag-drop-container.min.js

@@ -1,1 +0,1 @@

!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.DragDropContainer=e()}}(function(){return function e(t,n,r){function o(i,s){if(!n[i]){if(!t[i]){var u="function"==typeof require&&require;if(!s&&u)return u(i,!0);if(a)return a(i,!0);var d=new Error("Cannot find module '"+i+"'");throw d.code="MODULE_NOT_FOUND",d}var l=n[i]={exports:{}};t[i][0].call(l.exports,function(e){var n=t[i][1][e];return o(n?n:e)},l,l.exports,e,t,n,r)}return n[i].exports}for(var a="function"==typeof require&&require,i=0;i<r.length;i++)o(r[i]);return o}({1:[function(e,t,n){(function(r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(n,"__esModule",{value:!0});var s=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),u=function(e,t,n){for(var r=!0;r;){var o=e,a=t,i=n;r=!1,null===o&&(o=Function.prototype);var s=Object.getOwnPropertyDescriptor(o,a);if(void 0!==s){if("value"in s)return s.value;var u=s.get;if(void 0===u)return;return u.call(i)}var d=Object.getPrototypeOf(o);if(null===d)return;e=d,t=a,n=i,r=!0,s=d=void 0}},d="undefined"!=typeof window?window.React:"undefined"!=typeof r?r.React:null,l=o(d),p=e("./DragDropGhost"),c=o(p),h=function(e){function t(e){a(this,t),u(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this.state={clickX:0,clickY:0,left:0,top:0,clicked:!1,dragging:!1,dragged:!1},this.handleMouseDown=this.handleMouseDown.bind(this),this.handleTouchStart=this.handleTouchStart.bind(this),this.startDrag=this.startDrag.bind(this),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),this.drag=this.drag.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this.handleTouchEnd=this.handleTouchEnd.bind(this),this.drop=this.drop.bind(this),this.dragElem=null,this.currentTarget=null,this.prevTarget=null}return i(t,e),s(t,[{key:"componentDidMount",value:function(){this.props.dragGhost?this.dragElem=this.refs.drag_ghost.refs.the_ghost:this.dragElem=this.refs.drag_container}},{key:"createEvent",value:function(e,t,n){var r,o=this;return"function"!=typeof window.CustomEvent?(r=document.createEvent("CustomEvent"),r.initCustomEvent(e,!0,!0,{})):r=new CustomEvent(e,{bubbles:!0,cancelable:!0}),r.dataTransfer={getData:function(e){return e===o.props.dataKey?o.props.dragData:void 0},types:[this.props.dataKey]},r.sourceElement=this.refs.drag_container,r}},{key:"setCurrentTarget",value:function(e,t){this.dragElem.style.zIndex=-1;var n=document.elementFromPoint(e,t)||document.body;this.dragElem.style.zIndex=this.props.zIndex,this.currentTarget=this.dragElem.contains(n)?document.body:n}},{key:"generateEnterLeaveEvents",value:function(e,t){this.setCurrentTarget(e,t),this.currentTarget!==this.prevTarget&&(this.prevTarget&&this.prevTarget.dispatchEvent(this.createEvent(this.props.customEventNameDragLeave,e,t)),this.currentTarget&&this.currentTarget.dispatchEvent(this.createEvent(this.props.customEventNameDragEnter,e,t))),this.prevTarget=this.currentTarget}},{key:"generateDropEvent",value:function(e,t){this.setCurrentTarget(e,t),this.currentTarget.dispatchEvent(this.createEvent(this.props.customEventNameDrop,e,t))}},{key:"handleMouseDown",value:function(e){e.preventDefault(),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp),this.startDrag(e.clientX,e.clientY)}},{key:"handleTouchStart",value:function(e){e.preventDefault(),document.addEventListener("touchmove",this.handleTouchMove),document.addEventListener("touchend",this.handleTouchEnd),this.startDrag(e.targetTouches[0].pageX,e.targetTouches[0].pageY)}},{key:"startDrag",value:function(e,t){this.setState({clicked:!0,clickX:e-this.state.left,clickY:t-this.state.top}),this.props.onStartDrag(this.props.dragData)}},{key:"handleMouseMove",value:function(e){e.preventDefault(),this.state.clicked&&this.drag(e.clientX,e.clientY)}},{key:"handleTouchMove",value:function(e){e.preventDefault(),this.state.clicked&&this.drag(e.targetTouches[0].pageX,e.targetTouches[0].pageY)}},{key:"drag",value:function(e,t){this.generateEnterLeaveEvents(e,t),this.setState({dragging:!0,left:e-this.state.clickX,top:t-this.state.clickY}),this.props.onDragging(this.props.dragData,this.currentTarget,e,t)}},{key:"handleMouseUp",value:function(e){this.setState({clicked:!1}),this.state.dragging&&(document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp),this.drop(e.clientX,e.clientY))}},{key:"handleTouchEnd",value:function(e){this.setState({clicked:!1}),this.state.dragging&&(document.removeEventListener("touchmove",this.handleTouchMove),document.removeEventListener("touchend",this.handleTouchEnd),this.drop(e.changedTouches[0].pageX,e.changedTouches[0].pageY))}},{key:"drop",value:function(e,t){this.generateDropEvent(e,t),this.props.returnToBase?this.setState({left:0,top:0,dragging:!1}):this.setState({dragged:!0,dragging:!1}),this.props.onEndDrag(this.props.dragData,this.currentTarget,e,t)}},{key:"render",value:function(){var e={position:"relative"},t="";return this.props.dragGhost?t=l["default"].createElement(c["default"],{dragging:this.state.dragging,left:this.state.left,top:this.state.top,zIndex:this.props.zIndex,ref:"drag_ghost"},this.props.dragGhost):(e.left=this.state.left,e.top=this.state.top,e.zIndex=this.state.dragging||this.state.dragged?this.props.zIndex:"inherit"),l["default"].createElement("div",{style:e,onMouseDown:this.handleMouseDown,onTouchStart:this.handleTouchStart,ref:"drag_container"},this.props.children,t)}}]),t}(l["default"].Component);h.propTypes={children:l["default"].PropTypes.any,customEventNameDragEnter:l["default"].PropTypes.string,customEventNameDragLeave:l["default"].PropTypes.string,customEventNameDrop:l["default"].PropTypes.string,dataKey:l["default"].PropTypes.string,dragData:l["default"].PropTypes.object,dragGhost:l["default"].PropTypes.node,onDragging:l["default"].PropTypes.func,onEndDrag:l["default"].PropTypes.func,onStartDrag:l["default"].PropTypes.func,returnToBase:l["default"].PropTypes.bool,zIndex:l["default"].PropTypes.number},h.defaultProps={onStartDrag:function(){},onDragging:function(){},onEndDrag:function(){},dragData:{},dataKey:"data",returnToBase:!0,customEventNameDragEnter:"dragEnter",customEventNameDragLeave:"dragLeave",customEventNameDrop:"drop",zIndex:1e3},n["default"]=h,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./DragDropGhost":2}],2:[function(e,t,n){(function(e){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(n,"__esModule",{value:!0});var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),s=function(e,t,n){for(var r=!0;r;){var o=e,a=t,i=n;r=!1,null===o&&(o=Function.prototype);var s=Object.getOwnPropertyDescriptor(o,a);if(void 0!==s){if("value"in s)return s.value;var u=s.get;if(void 0===u)return;return u.call(i)}var d=Object.getPrototypeOf(o);if(null===d)return;e=d,t=a,n=i,r=!0,s=d=void 0}},u="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,d=r(u),l=function(e){function t(){o(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments)}return a(t,e),i(t,[{key:"render",value:function(){var e={position:"absolute",zIndex:this.props.zIndex,left:this.props.left,top:this.props.top,display:this.props.dragging?"block":"none"};return d["default"].createElement("div",{style:e,ref:"the_ghost"},this.props.children)}}]),t}(d["default"].Component);l.propTypes={children:d["default"].PropTypes.any,display:d["default"].PropTypes.string,dragging:d["default"].PropTypes.bool,left:d["default"].PropTypes.number,top:d["default"].PropTypes.number,zIndex:d["default"].PropTypes.number},n["default"]=l,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.DragDropContainer=e()}}(function(){return function e(t,n,r){function o(i,s){if(!n[i]){if(!t[i]){var u="function"==typeof require&&require;if(!s&&u)return u(i,!0);if(a)return a(i,!0);var d=new Error("Cannot find module '"+i+"'");throw d.code="MODULE_NOT_FOUND",d}var l=n[i]={exports:{}};t[i][0].call(l.exports,function(e){var n=t[i][1][e];return o(n?n:e)},l,l.exports,e,t,n,r)}return n[i].exports}for(var a="function"==typeof require&&require,i=0;i<r.length;i++)o(r[i]);return o}({1:[function(e,t,n){(function(r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(n,"__esModule",{value:!0});var s=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),u=function(e,t,n){for(var r=!0;r;){var o=e,a=t,i=n;r=!1,null===o&&(o=Function.prototype);var s=Object.getOwnPropertyDescriptor(o,a);if(void 0!==s){if("value"in s)return s.value;var u=s.get;if(void 0===u)return;return u.call(i)}var d=Object.getPrototypeOf(o);if(null===d)return;e=d,t=a,n=i,r=!0,s=d=void 0}},d="undefined"!=typeof window?window.React:"undefined"!=typeof r?r.React:null,l=o(d),p=e("./DragDropGhost"),c=o(p),h=function(e){function t(e){a(this,t),u(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this.state={clickX:0,clickY:0,left:0,top:0,clicked:!1,dragging:!1,dragged:!1},this.handleMouseDown=this.handleMouseDown.bind(this),this.handleTouchStart=this.handleTouchStart.bind(this),this.startDrag=this.startDrag.bind(this),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),this.drag=this.drag.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this.handleTouchEnd=this.handleTouchEnd.bind(this),this.drop=this.drop.bind(this),this.dragElem=null,this.currentTarget=null,this.prevTarget=null}return i(t,e),s(t,[{key:"componentDidMount",value:function(){this.props.dragGhost?this.dragElem=this.refs.drag_ghost.refs.the_ghost:this.dragElem=this.refs.drag_container;var e=this.refs.drag_container;if(this.props.dragHandleClassName)for(var t=e.getElementsByClassName(this.props.dragHandleClassName),n=0;n<t.length;n++)this.addListeners(t[n]);else this.addListeners(e)}},{key:"addListeners",value:function(e){var t=this;e.addEventListener("mousedown",function(e){t.handleMouseDown(e)},!1),e.addEventListener("touchstart",function(e){t.handleTouchStart(e)},!1)}},{key:"createEvent",value:function(e,t,n){var r,o=this;return"function"!=typeof window.CustomEvent?(r=document.createEvent("CustomEvent"),r.initCustomEvent(e,!0,!0,{})):r=new CustomEvent(e,{bubbles:!0,cancelable:!0}),r.dataTransfer={getData:function(e){return e===o.props.dataKey?o.props.dragData:void 0},types:[this.props.dataKey]},r.sourceElement=this.refs.drag_container,r}},{key:"setCurrentTarget",value:function(e,t){this.dragElem.style.zIndex=-1;var n=document.elementFromPoint(e,t)||document.body;this.dragElem.style.zIndex=this.props.zIndex,this.currentTarget=this.dragElem.contains(n)?document.body:n}},{key:"generateEnterLeaveEvents",value:function(e,t){this.setCurrentTarget(e,t),this.currentTarget!==this.prevTarget&&(this.prevTarget&&this.prevTarget.dispatchEvent(this.createEvent(this.props.customEventNameDragLeave,e,t)),this.currentTarget&&this.currentTarget.dispatchEvent(this.createEvent(this.props.customEventNameDragEnter,e,t))),this.prevTarget=this.currentTarget}},{key:"generateDropEvent",value:function(e,t){this.setCurrentTarget(e,t),this.currentTarget.dispatchEvent(this.createEvent(this.props.customEventNameDrop,e,t))}},{key:"handleMouseDown",value:function(e){e.preventDefault(),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp),this.startDrag(e.clientX,e.clientY)}},{key:"handleTouchStart",value:function(e){e.preventDefault(),document.addEventListener("touchmove",this.handleTouchMove),document.addEventListener("touchend",this.handleTouchEnd),this.startDrag(e.targetTouches[0].pageX,e.targetTouches[0].pageY)}},{key:"startDrag",value:function(e,t){this.setState({clicked:!0,clickX:e-this.state.left,clickY:t-this.state.top}),this.props.onStartDrag(this.props.dragData)}},{key:"handleMouseMove",value:function(e){e.preventDefault(),this.state.clicked&&this.drag(e.clientX,e.clientY)}},{key:"handleTouchMove",value:function(e){e.preventDefault(),this.state.clicked&&this.drag(e.targetTouches[0].pageX,e.targetTouches[0].pageY)}},{key:"drag",value:function(e,t){this.generateEnterLeaveEvents(e,t),this.setState({dragging:!0,left:e-this.state.clickX,top:t-this.state.clickY}),this.props.onDragging(this.props.dragData,this.currentTarget,e,t)}},{key:"handleMouseUp",value:function(e){this.setState({clicked:!1}),this.state.dragging&&(document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp),this.drop(e.clientX,e.clientY))}},{key:"handleTouchEnd",value:function(e){this.setState({clicked:!1}),this.state.dragging&&(document.removeEventListener("touchmove",this.handleTouchMove),document.removeEventListener("touchend",this.handleTouchEnd),this.drop(e.changedTouches[0].pageX,e.changedTouches[0].pageY))}},{key:"drop",value:function(e,t){this.generateDropEvent(e,t),this.props.returnToBase?this.setState({left:0,top:0,dragging:!1}):this.setState({dragged:!0,dragging:!1}),this.props.onEndDrag(this.props.dragData,this.currentTarget,e,t)}},{key:"render",value:function(){var e={position:"relative"},t="";return this.props.dragGhost?t=l["default"].createElement(c["default"],{dragging:this.state.dragging,left:this.state.left,top:this.state.top,zIndex:this.props.zIndex,ref:"drag_ghost"},this.props.dragGhost):(e.left=this.state.left,e.top=this.state.top,e.zIndex=this.state.dragging||this.state.dragged?this.props.zIndex:"inherit"),l["default"].createElement("div",{style:e,ref:"drag_container"},this.props.children,t)}}]),t}(l["default"].Component);h.propTypes={children:l["default"].PropTypes.any,customEventNameDragEnter:l["default"].PropTypes.string,customEventNameDragLeave:l["default"].PropTypes.string,customEventNameDrop:l["default"].PropTypes.string,dataKey:l["default"].PropTypes.string,dragData:l["default"].PropTypes.object,dragGhost:l["default"].PropTypes.node,dragHandleClassName:l["default"].PropTypes.string,onDragging:l["default"].PropTypes.func,onEndDrag:l["default"].PropTypes.func,onStartDrag:l["default"].PropTypes.func,returnToBase:l["default"].PropTypes.bool,zIndex:l["default"].PropTypes.number},h.defaultProps={onStartDrag:function(){},onDragging:function(){},onEndDrag:function(){},dragData:{},dataKey:"data",returnToBase:!0,customEventNameDragEnter:"dragEnter",customEventNameDragLeave:"dragLeave",customEventNameDrop:"drop",zIndex:1e3},n["default"]=h,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./DragDropGhost":2}],2:[function(e,t,n){(function(e){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(n,"__esModule",{value:!0});var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),s=function(e,t,n){for(var r=!0;r;){var o=e,a=t,i=n;r=!1,null===o&&(o=Function.prototype);var s=Object.getOwnPropertyDescriptor(o,a);if(void 0!==s){if("value"in s)return s.value;var u=s.get;if(void 0===u)return;return u.call(i)}var d=Object.getPrototypeOf(o);if(null===d)return;e=d,t=a,n=i,r=!0,s=d=void 0}},u="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,d=r(u),l=function(e){function t(){o(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments)}return a(t,e),i(t,[{key:"render",value:function(){var e={position:"absolute",zIndex:this.props.zIndex,left:this.props.left,top:this.props.top,display:this.props.dragging?"block":"none"};return d["default"].createElement("div",{style:e,ref:"the_ghost"},this.props.children)}}]),t}(d["default"].Component);l.propTypes={children:d["default"].PropTypes.any,display:d["default"].PropTypes.string,dragging:d["default"].PropTypes.bool,left:d["default"].PropTypes.number,top:d["default"].PropTypes.number,zIndex:d["default"].PropTypes.number},n["default"]=l,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});

@@ -43,3 +43,14 @@ var React = require('react');

</DragDropContainer>
<DragDropContainer
dataKey="food_data"
dragData={{'label': 'dogfood', 'tastes': 'yummy'}}
dragHandleClassName="drag_handle"
>
<div>
<div className="drag_handle" style={{backgroundColor:"#aaa"}}>Grab here</div>
<div style={{backgroundColor: "#eee"}}>this<br/>you<br/>cannot<br/>grab!<br/></div>
<div className="drag_handle" style={{backgroundColor:"#aaa"}}>Grab here</div>
</div>
</DragDropContainer>
<br/><br/><br/>

@@ -46,0 +57,0 @@ </div>

@@ -73,7 +73,29 @@ 'use strict';

}
// capture events
var elem = this.refs['drag_container'];
if (this.props.dragHandleClassName) {
var elems = elem.getElementsByClassName(this.props.dragHandleClassName);
for (var i = 0; i < elems.length; i++) {
this.addListeners(elems[i]);
}
} else {
this.addListeners(elem);
}
}
}, {
key: 'addListeners',
value: function addListeners(elem) {
var _this = this;
elem.addEventListener('mousedown', function (e) {
_this.handleMouseDown(e);
}, false);
elem.addEventListener('touchstart', function (e) {
_this.handleTouchStart(e);
}, false);
}
}, {
key: 'createEvent',
value: function createEvent(eventName, x, y) {
var _this = this;
var _this2 = this;

@@ -92,3 +114,3 @@ var evt;

'getData': function getData(arg) {
return arg === _this.props.dataKey ? _this.props.dragData : undefined;
return arg === _this2.props.dataKey ? _this2.props.dragData : undefined;
},

@@ -248,3 +270,3 @@ 'types': [this.props.dataKey]

'div',
{ style: styles, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart, ref: 'drag_container' },
{ style: styles, ref: 'drag_container' },
this.props.children,

@@ -276,2 +298,4 @@ ghost

dragHandleClassName: _react2['default'].PropTypes.string,
// callbacks (optional):

@@ -278,0 +302,0 @@ onDragging: _react2['default'].PropTypes.func,

{
"name": "react-drag-drop-container",
"version": "1.0.2",
"version": "1.0.3",
"description": "DragDropContainer",

@@ -5,0 +5,0 @@ "main": "lib/DragDropContainer.js",

@@ -19,2 +19,4 @@ # DragDropContainer

* Can specify a className to use for draghandle(s).
* Can tell the element to return-to-base after dragging, or to stay where you put it.

@@ -40,7 +42,4 @@

## Installation
Install it in your project using npm:
The easiest way to use react-drag-drop-container is to install it from NPM and include it in your own React build process (using [Browserify](http://browserify.org), [Webpack](http://webpack.github.io/), etc).
You can also use the standalone build by including `dist/react-drag-drop-container.js` in your page. If you use this, make sure you have already included React, and it is available as a global variable.
```

@@ -148,2 +147,5 @@ npm install react-drag-drop-container --save

##### dragHandleClassName
Class name for drag handle(s). Optional. If omitted, the whole thing is grabbable.
##### customEventNameDragEnter, customEventNameDragLeave, customEventNameDrop

@@ -150,0 +152,0 @@ Optional custom names for the three events. You can use these

@@ -46,4 +46,19 @@ import React from 'react';

}
// capture events
let elem = this.refs['drag_container'];
if (this.props.dragHandleClassName) {
let elems = elem.getElementsByClassName(this.props.dragHandleClassName);
for (let i=0; i<elems.length; i++){
this.addListeners(elems[i]);
}
} else {
this.addListeners(elem);
}
}
addListeners(elem) {
elem.addEventListener('mousedown', (e) => {this.handleMouseDown(e)}, false);
elem.addEventListener('touchstart', (e) => {this.handleTouchStart(e)}, false);
}
createEvent(eventName, x, y) {

@@ -194,3 +209,3 @@ var evt;

return (
<div style={styles} onMouseDown={this.handleMouseDown} onTouchStart={this.handleTouchStart} ref="drag_container">
<div style={styles} ref="drag_container">
{this.props.children}

@@ -220,2 +235,4 @@ {ghost}

dragHandleClassName: React.PropTypes.string,
// callbacks (optional):

@@ -222,0 +239,0 @@ onDragging: React.PropTypes.func,

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc