通过Jquery UI可拖动时应用阴影可排序

Posted 2021-03-31

我想为使用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);
}

答案

这是如何获得阴影效果。当您拖动项目时，它会在列表中放置一个模糊的矩形作为占位符。当您拖动时，它还会使项目本身具有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;}

另一答案

当你使用jquery ui sortable jquery create class call拖动项目时

的.ui-排序辅助

拖动项目所以你需要的只是你在这个班级的css

像这样

.ui-sortable-helper {box-shadow：0px 0px 10px 1px; }

现在你可以在你选择的项目中放置阴影，并且你将把项目放在这个地方

的.ui-排序占位符

有关更多信息，请查看此示例Here和demo

希望能帮到你，这是我第一次回答