Question

在this Angular example中，如果你将一个苹果拖到橙色部分并将其放在那里，那么会有一个动画慢慢地将苹果返回到它所来自的位置。这在视觉上表明将苹果拖到橙色部分是无效的。使用的Angular拖放库来自codef0rmer。

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

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）进行实际的拖放功能，使用React Flip Move（https://github.com/joshwcomeau/react-flip-move）或React Motion（https://github.com/chenglou/react-motion）来设置DOM更改动画

他们都有足够的简单示例/教程来帮助你...

react-dnd中的动画

1 个答案: