如果有一个触摸后端可以自动为触摸设备接通,那将是杀手er。
确实! 下周我会调查。
我使用指针事件做了这样的事情: 因此,要拖动的项目下的元素可能会使鼠标悬停在事件上; 我有兴趣看看还有什么其他方法可以解决这个问题
什么是使用touchmove的最新拖放库? jQuery UI? 我们需要寻找一个好的解决方案并采用它的技巧。
我认为最好且本着该图书馆的精神,避免任何DOM操作(如流行的lib一样,是否通过克隆预览节点,更改其translationX / Y等),而是让消费者绘制“拖动层”并为此提供消费者必要的数据。
换句话说,如果使用触摸后端拖动Card
组件,则react-dnd不会尝试以某种方式移动它本身。 由您决定在应用程序顶部渲染一些“图层”组件。 这个组件将使用react-dnd提供的DragLayerMixin
来了解当前元素,它的位置等。它决定如何根据其类型渲染所拖动的项目,并且也是100%React。
var App = React.createClass({
render() {
return (
<div>
{this.props.activeRouteHandler />
<DragDropLayer />
</div>
);
}
});
var { DragLayerMixin } = require('react-dnd');
var DragDropLayer = React.createClass({
mixins: [DragLayerMixin],
render() {
// With non-native dragging backend, rendering items in the process of dragging is your responsibility.
// It's up to you to use translate3d or top/left, render thumbnails or real components, etc.
var {
draggedItem,
draggedItemType,
clientX,
clientY
} = this.getDragLayerState(); // provided by mixin
if (!draggedItem) {
return null;
}
return (
<div style={{zIndex: 10000, pointerEvents: 'none', position: 'absolute'}}>
{draggedItem &&
<div style={{transform: `translate3d(${clientX}, ${clientY}, 0)`}}>
{this.renderItem(draggedItemType, draggedItem)}
</div>
}
</div>
);
},
renderItem(type, item) {
// It's completely up to the consumer to specify how to render different types
switch (type) {
case ItemTypes.Card:
return <Card title={item.title} />;
case ItemTypes.List:
return <img src='thumbnail.jpg' />;
}
});
顺便说一句,这种方法提供了非常酷的可能性,因为对于某些应用程序,拖动层是包含可拖动项的。 拖动层不必分开,尽管可以,但是可以分开。
对于将项目拖到某个容器上的应用程序,此容器可以使用DragLayerMixin
并因此了解当前拖动位置并在发生拖动时移动实际元素:
对于诸如Trello之类的应用程序,这些应用程序将项目拖到不同容器中的屏幕上,最好使用DragLayerMixin
来使用一个单独的顶层组件来呈现绝对位置的当前拖动的项目。
这很有道理。 几乎所有浏览器,无论是台式机还是移动式浏览器,都应该能够在屏幕上平滑地动画化项目。 这样可以轻松地添加酷的3d效果,就像Trello在移动卡时一样。
这也将允许在拖动时设置鼠标光标和更灵活的占位符呈现...使用本机DND API确实无法做到的事情
@nelix @KyleAMathews
我在这里有一个概念证明: http ://gaearon.github.io/react-dnd/#/drag -around-experimental
当您移动它时它会闪烁:-)(在Firefox中尚不可用)
相关源代码:
https://github.com/gaearon/react-dnd/blob/experiments/examples/_drag-around-experimental/Box.js#L69
如您所见,这取决于用户在其上绘制拖动层和组件,因此它确实很灵活。
我将在本周尝试完成此操作,以此作为获得支持的垫脚石,在此之后,对于触摸模式进行同样的操作应该不难。
我们像这样使用拖动层,但是我们使用onMouseMove等,以便您可以更改鼠标光标...
对我们来说是一个很小但非常重要的问题。 它还允许使用大多数用于触摸和指针事件的相同代码。
对于我来说,DragLayer仍然是朝着正确方向迈出的一步,一旦您实现了触摸支持,如果您有兴趣将其作为功能部件,那么我愿意尝试扩展该功能以支持指针和鼠标事件吗?
我想将HTML5 D&D API用作默认后端,然后选择启用基于触摸/基于mouseemove的后端。
HTML5 D&D将是最简单的方法(不需要拖动层,所有内容都由浏览器管理)。 选择使用mousemove / touchmove鼠标将需要您实现一个拖动图层以绘制您喜欢的任何东西。
说得通?
当然可以,这就是我希望会发生的事情。
HTML5 D&D快速且易于使用(除了怪癖),因此默认情况下它是显而易见的选择。
因此,我只是请求启用此拖放触摸。 有没有人做过并想分享技巧?
@乔治
@nelix在mousemove
后端上开始工作,之后我们将在touchmove
后端上进行。
您可以在此处查看进行中的工作: https : DragDropMixin
,哪些部分需要移入backends/HTML5
(以及其他后端)。
如果您想进行此操作,则可以从该提交开始,并继续实现mousemove后端。 当它工作时,不难实现类似的touchmove后端。
请,如果您要进行此工作,请在此处或Gitter会议室中向我们更新,因此我们不会以两种实现结尾。
这似乎很有希望! 关于何时降落有什么想法? :)
我目前正忙于另一个项目,要等到7月。
我可以在7月或8月的某个地方进行此工作,但是如果有人击败我,我会很高兴的:-)
因为在此线程中提到了1.1,而v1.1.4已发布。 我只是想知道上述概念证明是否已包含在1.1.4中?
不。
我不应该使用精确的版本号,因为您永远不知道什么时候碰到:-)
我目前没有时间从事此工作,但是概念证明在PR中。 我可能会更新PR来反映当前的API,并等待有人实际实现它。
仅供参考: https :
对于那些追随我的人来说,这似乎是前进的道路https://github.com/LouisBrunner/react-dnd-multi-backend
我写了这段代码:
function multiBackends(...backendFactories) {
return function(manager) {
const backends = backendFactories.map(b => b(manager));
return {
setup: (...args) =>
backends.forEach(b => b.setup.apply(b, args)),
teardown: (...args) =>
backends.forEach(b => b.teardown.apply(b, args)),
connectDropTarget: (...args) =>
backends.forEach(b => b.connectDropTarget.apply(b, args)),
connectDragPreview: (...args) =>
backends.forEach(b => b.connectDragPreview.apply(b, args)),
connectDragSource: (...args) =>
backends.forEach(b => b.connectDragSource.apply(b, args)),
};
};
}
我这样使用:
DragDropContext(multiBackends(
ReactDnDHTML5Backend,
ReactDnDTouchBackend,
))
react-dnd-html5-backend
和react-dnd-touch-backend
收听不连续的事件集。 (dragstart,dragend,dragenter,dragleave拖曳以及放置vs touchstart,touchend和touchmove)。
一些基本的测试并且运行良好,我的拖放现在同时支持触摸和鼠标事件。
有什么原因不起作用吗?
最有用的评论
对于那些追随我的人来说,这似乎是前进的道路https://github.com/LouisBrunner/react-dnd-multi-backend