jquery - 通过 Jquery UI Sortable 拖动时应用阴影

Question

我想为使用 jQuery UI Sortable 拖动的元素添加“阴影”。如果用户放下元素(而不是当前拖动的元素本身)，此阴影基本上位于元素所在的区域。当用户拖动列表时，Trello 会实现此功能。

有谁知道如何解决这个问题？我可以看到我们可以访问被拖动的元素(通过 ui.item)，但我对如何访问它在被拖放时所在的框区域感到困扰。在我的代码中，我有以下内容:

<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);
}

Answer 1

这是获得阴影效果的方法。当您拖动元素时，它会在列表中放置一个模糊的矩形作为占位符。它还会在您拖动时使元素本身具有 50% 的不透明度，以便您可以透过它看到阴影。

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;}