Application de Shadow lorsque glissé via l'interface utilisateur Jquery Triable

J'aimerais ajouter une "ombre" pour l'élément que je fais glisser à l'aide de jQuery UI Sortable. Cette ombre est essentiellement sur la zone de où l'élément serait si l'utilisateur a supprimé l'élément (pas l'élément lui-même actuellement déplacé). Trello implémente cette fonctionnalité lorsque les utilisateurs glissent des listes.

Est-ce que quelqu'un sait comment cela pourrait être abordé? Je peux voir que nous pouvons accéder à l’élément traîné (via ui.item), mais je suis dérangé par la façon dont nous pourrions accéder à la zone de la boîte dans laquelle elle se trouverait si elle était supprimée. Dans mon code, j’ai le texte suivant:

<script>
$(function() {
$( "#sortable-lists" ).sortable({
start: function (event, ui) {
ui.item.toggleClass("dragged");
},

stop: function (event, ui) {
ui.item.toggleClass("dragged");
},

update: function (event, ui) {
var data = $(this).sortable("serialize");
var index = ui.item.index();

ui.item.trigger("dropList", [ui.item.data("id"), index]);
$.ajax({
data: data+"&authenticity_token="+AUTH_TOKEN,
type: "PATCH",
url: "/api/lists/update_order"
});
}
});
$( "#sortable-lists" ).disableSelection();
});
</script>

CSS:

.dragged {
transform: rotate(3deg);
}

Réponses:

0 pour la réponse № 1

voici comment obtenir un effet d’ombre. Cela mettra un rectangle flou dans la liste comme espace réservé pendant que vous faites glisser un élément. Cela lui donnera également une opacité de 50% pendant que vous faites glisser pour que vous puissiez voir l’ombre à travers.

js

yourlist.sortable({
placeholder: "sortable-placeholder",
opacity: 0.5,
sort: function(event, ui){
$(".sortable-placeholder").height(ui.item.outerHeight());
}
});

css

.sortable-placeholder { box-shadow: inset 0px 0px 20px 10px #fff; background-color: #bbb; min-height: 5em;}

---

-1 pour la réponse № 2

lorsque vous faites glisser un élément à l'aide de jquery ui jquery triable create call class

.ui-sortable-helper

pour faire glisser l'élément de sorte que tout ce dont vous avez besoin est de mais votre CSS dans cette classe

comme ça

.ui-sortable-helper { boîte-ombre: 0px 0px 10px 1px; }

vous pouvez maintenant mettre de l'ombre dans l'élément sélectionné et pour l'endroit où vous mettrez l'élément, utilisez la classe

.ui-sortable-placeholder

et pour plus d'informations, vous pouvez consulter cet exemple Ici et démo

j'espère vous aider c'est ma première réponse

---