react-dnd中的動畫

在this Angular example中，如果您將一個蘋果拖動到橙色部分並將其放在那裏，則會有一個動畫緩慢地將蘋果返回到它來自的位置。這在視覺上表示將蘋果拖動到橙色部分是無效的。使用的角拖放庫來自codef0rmer。react-dnd中的動畫

如何在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; 
     } 
    } 
    }; 
});

來源

2016-03-02 Dan Cron

是的，你可以使用陣營DND（https://github.com/react-dnd/react-dnd）的實際拖放功能和應對翻轉移動（https://github.com/joshwcomeau/react-flip-move ）或React Motion（https://github.com/chenglou/react-motion）來動畫DOM更改。

他們都有足夠簡單的例子/教程讓你去..

來源

2017-11-15 14:57:11

感謝您的第一個答案！但是，您可以在這裏添加更多來說明嗎？也許粘貼一些代碼示例。請參閱https://stackoverflow.com/help/how-to-answer –

react-dnd中的動畫

回答

相關問題