react-dnd 中的动画

Question

在this Angular example, if you drag an apple to the orange section and drop it there, then there is an animation which slowly returns the apple to the spot it came from. This visually communicates that dragging an apple to the orange section is not valid. The Angular drag and drop library used is from codef0rmer.

如何在 react-dnd 或其他 react 拖放包中创建类似的动画？

Here 是带有一些动画的 React 拖放示例。我可以用 react-dnd 或其他广泛使用的软件包做这样的事情吗？

其余的是Angular示例代码，它也在plnkr Angular示例中。

index.html:

<!DOCTYPE html>
<html ng-app="drag-and-drop">

<head lang="en">
  <meta charset="utf-8">
  <title>Drag & Drop: Multiple listsr</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="angular-dragdrop.min.js"></script>
  <script src="app.js"></script>
  <style>
    .thumbnail {
      height: 280px !important;
    }   

    .btn-droppable {
      width: 180px;
      height: 30px;
      padding-left: 4px;
    }   

    .btn-draggable {
      width: 160px;
    }   
  </style>
</head>
<body>
  <div ng-controller="oneCtrl">
    <!-- Drag Apple -->
    <div>
      <div class="btn" 
        ng-repeat="item in applesin"
        data-drag=true
        data-jqyoui-options="{revert: 'invalid'}"
        ng-model="applesin"
        jqyoui-draggable="{index: {{$index}}, placeholder:'keep', animate:true}"
      >
        {{item.title}}
      </div>
    </div>

    <!-- Drop Apple -->
    <div>
      <div class="thumbnail" 
        data-drop="true" 
        ng-model="applesout" 
        data-jqyoui-options="appleOptions" 
        data-jqyoui-droppable="{onDrop: 'appleOnDrop'}"
      >
        <div 
          ng-hide=applesout.title
          ng-model="applesout"
        >
          Drop an apple here
        </div>
        <div 
          class="btn" 
          ng-hide=!applesout.title
          ng-model="applesout" 
        >
          {{applesout.title}}
        </div>
      </div>
    </div>
    <!-- Drag Orange -->
    <div>
      <div class="btn" 
        ng-model="orangesin"
        ng-repeat="item in orangesin"
        data-drag="true"
        data-jqyoui-options="{
          revert: 'invalid',
          scroll: 'true',
          containment: 'body',
          helper: 'clone',
          appendTo: 'body'
        }"
        jqyoui-draggable="{index: {{$index}}, placeholder:'keep', animate:true}"
      >
        {{item.title}}
      </div>
    </div>
    <!-- Drop Orange-->
    <div>
      <div class="thumbnail" 
        data-drop="true"
        ng-model="orangesout" 
        data-jqyoui-options="validateDropOranges" 
        jqyoui-droppable="{multiple:false}">
        <div
          ng-hide=orangesout.title
          ng-model="orangesout" 
        >
          Drop an orange here
        </div>
        <div 
          class="btn" 
          ng-hide=!orangesout.title
          ng-model="orangesout" 
        >
          {{orangesout.title}}
        </div>
      </div>
    </div>
  </div>
</body>
</html>

和app.js：

varApp = angular.module('drag-and-drop', ['ngDragDrop']);

App.controller('oneCtrl',function($scope, $timeout) {

  $scope.applesin = [ 
    { 'title': 'Apple 1'},
    { 'title': 'Apple 2'},
    { 'title': 'Apple 3'},
    { 'title': 'Apple 4'} 
  ];  

  $scope.applesout = {}; 

  $scope.orangesin = [ 
    { 'title': 'Orange 1'},
    { 'title': 'Orange 2'},
    { 'title': 'Orange 3'},
    { 'title': 'Orange 4'} 
  ];  

  $scope.orangesout = {}; 

  $scope.appleOnDrop = function(e, obj) {
console.log("on drop apple "); 
console.log("$(e.target).scope(): "); 
console.log($(e.target).scope());
    var dest = $(e.target).scope().this;
console.log("$(obj.draggable).scope(): "); 
console.log($(obj.draggable).scope());
    var src = $(obj.draggable).scope().x;
  };  

  // Limit apples to apples, oranges to oranges
  $scope.appleOptions = { 
    accept: function(dragEl) {
console.log("validate apple");
      if (dragEl[0].innerHTML.indexOf("Apple") > -1) {
        return true;
      } else {
        return false;
      }   
    }   
  };  

  $scope.validateDropOranges = { 
    accept: function(dragEl) {
console.log("validate orange");
      if (dragEl[0].innerHTML.indexOf("Orange") > -1) {
        return true;
      } else {
        return false;
      }   
    }   
  };  
});

Answer 1

是的，您可以使用 React DnD (https://github.com/react-dnd/react-dnd) for the actual drag and drop functionality and React Flip Move (https://github.com/joshwcomeau/react-flip-move) or React Motion (https://github.com/chenglou/react-motion) 为 DOM 变化设置动画。

他们都有足够简单的 examples/tutorials 让你继续......

react-dnd 中的动画

Animation in react-dnd

javascript

reactjs

drag-and-drop

react-dnd