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 municates 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=".min.js"></script>
<script src=".min.js"></script>
<script src=".2.0/angular.min.js"></script>
<link href=".10.3/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link href=".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;
}
}
};
});
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 municates 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./ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis./ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis./ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<link href="http://ajax.googleapis./ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link href="http://netdna.bootstrapcdn./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;
}
}
};
});
1 Answer
Reset to default 3Yes, you can use React DnD (https://github./react-dnd/react-dnd) for the actual drag and drop functionality and React Flip Move (https://github./joshweau/react-flip-move) or React Motion (https://github./chenglou/react-motion) for animating the DOM changes.
They all have enough simple examples/tutorials to get you going..