我实现了react-dnd，这是一个用于React的灵活HTML5拖放混入，具有完整的DOM控制。
现有的拖放库不适合我的用例，因此我编写了自己的库。它类似于我们在Stampsy.com上运行了大约一年的代码，但是为了利用React和Flux进行了重写。
我的主要要求：
- 发出自己的零DOM或CSS，留给使用组件；
- 在消耗的组件上施加尽可能少的结构；
- 使用HTML5拖放作为主要后端，但将来可以添加不同的后端；
- 与原始HTML5 API一样，强调拖动数据而不仅仅是“可拖动的视图”；
- 隐藏使用代码中的HTML5 API怪癖；
- 对于不同种类的数据，不同的组件可能是“拖放源”或“放置目标”。
- 在需要时，允许一个组件包含多个拖动源和放置目标；
- 如果拖放或悬停兼容数据，放下目标可以轻松更改其外观；
- 轻松使用图像来拖动缩略图而不是元素屏幕截图，从而避免了浏览器的怪癖。
如果您觉得这些听起来很熟悉，请继续阅读。
用法
简单拖动源
首先，声明可以拖动的数据类型。
这些用于检查拖动源和放置目标的“兼容性”：
// ItemTypes.js
module.exports = {
BLOCK: 'block',
IMAGE: 'image'
};
（如果您没有多种数据类型，则此库可能不适合您。）
然后，让我们制作一个非常简单的可拖动组件，将其拖动时表示IMAGE：
var { DragDropMixin } = require('react-dnd'),
ItemTypes = require('./ItemTypes');
var Image = React.createClass({
mixins: [DragDropMixin],
configureDragDrop(registerType) {
// Specify all supported types by calling registerType(type, { dragSource?, dropTarget? })
registerType(ItemTypes.IMAGE, {
// dragSource, when specified, is { beginDrag(), canDrag()?, endDrag(didDrop)? }
dragSource: {
// beginDrag should return { item, dragOrigin?, dragPreview?, dragEffect? }
beginDrag() {
return {
item: this.props.image
};
}
}
});
},
render() {
// {...this.dragSourceFor(ItemTypes.IMAGE)} will expand into
// { draggable: true, onDragStart: (handled by mixin), onDragEnd: (handled by mixin) }.
return (
<img src={this.props.image.url}
{...this.dragSourceFor(ItemTypes.IMAGE)} />
);
}
);
通过指定configureDragDrop，我们可以知道DragDropMixin该组件的拖放行为。可拖动和可拖放组件都使用相同的mixin。
在内部configureDragDrop，我们需要调用该组件支持的registerType每个自定义ItemTypes。例如，有可能是图像的几次交涉中您的应用程序，每个将提供一个dragSource供ItemTypes.IMAGE。
A dragSource只是一个对象，指定拖动源的工作方式。您必须实现beginDrag以返回表示要拖动的数据的项目，还可以选择一些选项来调整拖动的UI。您可以选择实现canDrag禁止拖动，或者endDrag(didDrop)在发生（或尚未发生）放置时执行某些逻辑。您可以通过让组件生成共享的mixin在组件之间共享此逻辑dragSource。
最后，必须{...this.dragSourceFor(itemType)}在其中的一些（一个或多个）元素上使用render以附加拖动处理程序。这意味着您可以在一个元素中具有多个“拖动手柄”，它们甚至可能对应于不同的项目类型。（如果您不熟悉JSX Spread Attributes语法，请检查一下）。
简单掉落目标
假设我们要ImageBlock成为IMAGEs 的放置目标。几乎一样，除了我们需要给出registerType一个dropTarget实现：
var { DragDropMixin } = require('react-dnd'),
ItemTypes = require('./ItemTypes');
var ImageBlock = React.createClass({
mixins: [DragDropMixin],
configureDragDrop(registerType) {
registerType(ItemTypes.IMAGE, {
// dropTarget, when specified, is { acceptDrop(item)?, enter(item)?, over(item)?, leave(item)? }
dropTarget: {
acceptDrop(image) {
// Do something with image! for example,
DocumentActionCreators.setImage(this.props.blockId, image);
}
}
});
},
render() {
// {...this.dropTargetFor(ItemTypes.IMAGE)} will expand into
// { onDragEnter: (handled by mixin), onDragOver: (handled by mixin), onDragLeave: (handled by mixin), onDrop: (handled by mixin) }.
return (
<div {...this.dropTargetFor(ItemTypes.IMAGE)}>
{this.props.image &&
<img src={this.props.image.url} />
}
</div>
);
}
);
将源+目标拖放到一个组件中
假设我们现在希望用户能够将图像拖出ImageBlock。我们只需要添加适当dragSource的内容和一些处理程序即可：
var { DragDropMixin } = require('react-dnd'),
ItemTypes = require('./ItemTypes');
var ImageBlock = React.createClass({
mixins: [DragDropMixin],
configureDragDrop(registerType) {
registerType(ItemTypes.IMAGE, {
// Add a drag source that only works when ImageBlock has an image:
dragSource: {
canDrag() {
return !!this.props.image;
},
beginDrag() {
return {
item: this.props.image
};
}
}
dropTarget: {
acceptDrop(image) {
DocumentActionCreators.setImage(this.props.blockId, image);
}
}
});
},
render() {
return (
<div {...this.dropTargetFor(ItemTypes.IMAGE)}>
{/* Add {...this.dragSourceFor} handlers to a nested node */}
{this.props.image &&
<img src={this.props.image.url}
{...this.dragSourceFor(ItemTypes.IMAGE)} />
}
</div>
);
}
);
还有什么可能？
我没有介绍所有内容，但是可以通过其他几种方式使用此API：
- 使用
getDragState(type)和getDropState(type)了解拖动是否处于活动状态，并使用它来切换CSS类或属性；
- 指定
dragPreview将Image图像用作拖动占位符（用于ImagePreloaderMixin加载它们）；
- 说，我们要重新
ImageBlocks排序。我们只需要他们实施dropTarget和dragSource进行ItemTypes.BLOCK。
- 假设我们添加其他种类的块。我们可以通过将其重新排序逻辑放在mixin中来重用它们。
dropTargetFor(...types) 允许一次指定几种类型，因此一个放置区可以捕获许多不同的类型。- 当您需要更细粒度的控制时，大多数方法都将通过拖动事件传递，这导致它们成为最后一个参数。
有关最新文档和安装说明，请访问Github上的react-dnd repo。