React-dnd: 터치 백엔드

과연! 다음 주에 이것을 살펴 보겠습니다.

포인터 이벤트를 사용하여 이와 같은 작업을 수행했습니다. none; 드래그되는 항목 아래의 요소가 이벤트 위로 마우스를 잡을 수 있습니다. 이 문제를 해결하는 다른 방법이 있는지 궁금합니다.

touchmove를 사용하는 최첨단 드래그 앤 드롭 라이브러리는 무엇입니까? jQuery UI? 우리는 좋은 해결책을 찾고 그 트릭을 채택해야합니다.

나는 프로젝트에서 이들 중 어느 것도 사용하지 않았지만 인터넷 검색은 다음을 발견했습니다.

• http://interactjs.io/
• http://draggabilly.desandro.com/
• https://github.com/dbushell/Nestable
• https://github.com/a5hik/ng-sortable

DOM 조작 (예 : 미리보기를위한 노드 복제, translateX / 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' />;
  }
});

BTW이 접근 방식은 _ 일부 앱의 경우 _ 드래그 레이어 _는 드래그 가능한 항목을 포함하는 것이기 때문에 정말 멋진 가능성을 열어줍니다. 드래그 레이어는 필요하다면 분리 할 수 ​​있지만 분리 할 필요는 없습니다.

항목이 일부 컨테이너로 드래그되는 앱의 경우이 컨테이너는 DragLayerMixin 를 사용하여 현재 드래그 위치에 대해 학습하고 드래그가 발생할 때 실제 요소를 이동할 수 있습니다.

항목이 여러 컨테이너에 걸쳐 화면을 가로 질러 드래그되는 Trello와 같은 앱의 경우 DragLayerMixin 를 사용하는 별도의 최상위 구성 요소를 사용하여 현재 드래그 된 항목을 절대 위치에 렌더링하는 것이 유용 할 수 있습니다.

이것은 많은 의미가 있습니다. 데스크톱이든 모바일이든 거의 모든 브라우저는 화면 주변의 항목을 부드럽게 움직일 수 있어야합니다. 이렇게하면 카드를 이동할 때 Trello와 같은 멋진 3D 효과를 쉽게 추가 할 수 있습니다.

이것은 또한 드래그하는 동안 마우스 커서를 설정하고 더 유연한 자리 표시 자 렌더링을 허용합니다 ... 기본 DND API로 실제로 할 수없는 작업

브라우저 D & D API에서이 "드래그 레이어"API를 사용할 수 있도록 만들 수도 있습니다. 이 예제 와 같이 dragImage 를 투명한 픽셀로 설정하고 원하는 것을 그립니다.

트윗 담아 가기

여기에 개념 증명이 있습니다. http://gaearon.github.io/react-dnd/#/drag -around-experimental

이동하는 동안 깜박입니다 :-) (아직 Firefox에서는 작동하지 않습니다)

관련 소스 코드 :

https://github.com/gaearon/react-dnd/blob/experiments/examples/_drag-around-experimental/index.js#L14

https://github.com/gaearon/react-dnd/blob/experiments/examples/_drag-around-experimental/DragLayer.js

https://github.com/gaearon/react-dnd/blob/experiments/examples/_drag-around-experimental/Box.js#L69

보시다시피 드래그 레이어와 구성 요소를 그리는 것은 소비자의 몫이므로 매우 유연합니다.

이번 주에는 지지대를 만지기위한 디딤돌로 마무리하려고 노력할 것입니다. 그 후에는 터치 모드에서도 똑같이하는 것이 어렵지 않을 것입니다.

우리는 이와 같은 드래그 레이어를 사용하지만 마우스 커서를 변경할 수 있도록 onMouseMove 등을 사용합니다.
우리에게는 사소하지만 매우 중요한 관심사입니다. 또한 터치 및 포인터 이벤트에 대해 거의 동일한 코드를 사용할 수 있습니다.
그래도 DragLayer 물건은 저에게 올바른 방향으로 나아가는 단계입니다. 일단 터치 지원을하면 포인터 및 마우스 이벤트를 기능으로 사용하는 데 관심이 있다면이를 지원하도록 기꺼이 확장 할 수 있습니까?

HTML5 D & D API를 기본 백엔드로 설정 한 다음 터치 기반 / mousemove 기반 백엔드를 옵트 인하고 싶습니다.

HTML5 D & D가 가장 간단합니다 (드래그 레이어가 필요하지 않으며 모든 것이 브라우저에서 관리 됨). mousemove / touchmove를 선택하려면 원하는 것을 그릴 수있는 드래그 레이어를 구현해야합니다.

말이된다?

물론입니다. 그게 제가 바라던 일입니다.
HTML5 D & D는 빠르고 (특징 외에도) 사용이 매우 간단하므로 기본적으로 확실한 선택입니다.

그래서 방금이 드래그 앤 드롭 터치를 활성화 해 달라는 요청을 받았습니다. 누구든지이 작업을 수행하고 팁을 공유하고 싶습니까?

@조젯

@nelix 는 mousemove 백엔드에서 작업을 시작했으며 그 후에 touchmove 백엔드를 수행합니다.

현재 진행중인 작업을 볼 수 있습니다 : https://github.com/nelix/react-dnd/commit/8de7f7fe24c7ae397a971c517dada9323e6c27f0를 (이 진행되고에서 멀리 아직이 시점에서 정말 일을하지 않습니다). DragDropMixin 남아있는 부분과 backends/HTML5 (및 기타 백엔드)로 이동해야하는 부분을 파악해야합니다.

작업하고 싶다면 해당 커밋으로 시작하여 mousemove 백엔드를 계속 구현할 수 있습니다. 작동하면 유사한 touchmove 백엔드를 구현하는 것이 어렵지 않습니다.

이 작업을하고 싶다면 여기 또는 Gitter room에서 업데이트를 유지하여 두 가지 구현으로 끝나지 않도록하십시오.

다음은 터치 지원 개념 증명입니다. https://github.com/gaearon/react-dnd/pull/143

당신은 그것을 가지고 놀 수 있습니다 : http://rawgit.com/gaearon/react-dnd/touch-poc/examples/index.html

데스크톱에서는 HTML5 백엔드를 사용하고 모바일에서는 터치 백엔드를 사용합니다.
사용자 지정 렌더링 예제 만 모바일에서 드래그 미리보기를 표시합니다.

이것은 매우 유망 해 보입니다! 이것이 언제 착륙할지에 대한 아이디어가 있습니까? :)

저는 현재 다른 프로젝트로 바쁘고 7 월까지 진행됩니다.
나는 7 월이나 8 월에이 작업을 할 수 있을지도 모르지만 누군가 나를 이기면 기뻐할 것입니다 :-)

이 스레드에서 1.1이 언급되었고 v1.1.4가 나왔습니다. 위의 개념 증명이 이미 1.1.4에 포함되어 있는지 궁금합니다.

아니.

정확한 버전 번호를 사용하지 말았어야했는데 언제 부딪 힐지 모르기 때문입니다. :-)

나는 현재 이것에 대해 일할 시간이 없지만 개념 증명은 PR에 있습니다. 현재 API를 반영하도록 PR을 업데이트하고 누군가 실제로 구현할 때까지 기다릴 것입니다.

https://github.com/gaearon/react-dnd/pull/240 에서 토론을 계속하겠습니다

참고 : https://github.com/yahoo/react-dnd-touch-backend.

나를 따라 오는 사람들을 위해 여기에 경로가있는 것 같습니다 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 dragover 및 drop vs touchstart, touchend 및 touchmove).

일부 기본 테스트가 잘 작동하며 이제 드래그 앤 드롭이 터치와 마우스 이벤트를 동시에 지원합니다.

작동하지 않는 이유가 있습니까?