react-dnd 中的动画
Posted
技术标签:
【中文标题】react-dnd 中的动画【英文标题】：Animation in react-dnd 【发布时间】：2016-06-15 12:23:42 【问题描述】：在this Angular example 中，如果您将一个苹果拖到橙色部分并将其放在那里，则会有一个动画缓慢地将苹果返回到它原来的位置。这在视觉上表明将苹果拖到橙色部分是无效的。使用的 Angular 拖放库来自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;
;
);
【问题讨论】：
【参考方案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 更改的动画。
他们都有足够的简单示例/教程来帮助您学习..
【讨论】：
感谢您对 SO 的第一个回答！但是，您可以在这里添加更多内容来说明吗？也许粘贴一些代码示例。见***.com/help/how-to-answer以上是关于react-dnd 中的动画的主要内容，如果未能解决你的问题，请参考以下文章
使用 ReactJs 和 react-dnd 拖放可排序列表的问题
react-dnd 简单的可排序示例 ES6 而不是 ES7
使用 react-dnd 和 useDrag 和 useDrop 进行测试