Animation in react-dnd

Question

In 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 .

How would I create a similar animation in react-dnd or another react drag and drop package?

Here is a React drag and drop example with some animation. Can I do something like this with react-dnd, or another widely used package?

The rest is the Angular sample code which is also in plnkr Angular example.

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>

And 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

Yes, you can use 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 ) for animating the DOM changes.

They all have enough simple examples/tutorials to get you going..

Animation in react-dnd

Question

1 answers

solution1
1 ACCPTED 2017-11-15 14:57:11

Animation in react-dnd

Question

1 answers

solution1 1 ACCPTED 2017-11-15 14:57:11

solution1
1 ACCPTED 2017-11-15 14:57:11