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

Answer 2

使用jquery ui sortable jquery create class call

拖动项目时

的.ui可排序辅助

拖动项目所以你需要的只是你在这个课堂上的css

像这样

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

现在您可以在所选项目中添加阴影而对于你要放置该项目的地方

的.ui可排序占位符

有关详情，请查看此示例Here和demo

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

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

2 个答案: