在 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;
}
}
};
});
最佳答案
是的，您可以使用 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 更改。
它们都有足够的简单示例/教程来帮助您入门..
关于javascript - React-dnd 中的动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35750787/