3
Dans this Angular example, si vous faites glisser une pomme dans la section orange et l'y déposez, une animation ramène lentement la pomme à l'endroit d'où elle provient. Cela communique visuellement que glisser une pomme à la section orange n'est pas valide. La bibliothèque de drag and drop angulaire utilisée est de codef0rmer.Animation dans react-dnd
Comment créer une animation similaire dans react-dnd ou dans un autre package de glisser-déposer?
Here est un exemple de glisser-déposer React avec une animation. Puis-je faire quelque chose comme ça avec react-dnd, ou un autre paquet largement utilisé?
Le reste est le code de l'échantillon angulaire qui est également dans l'exemple angulaire plnkr.
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>
Et 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;
}
}
};
});
Merci pour votre première réponse sur SO! Pouvez-vous ajouter un peu plus ici pour illustrer, cependant? Peut-être coller des exemples de code. Voir https://stackoverflow.com/help/how-to-answer –