Java实现拖拽列表项的排序功能

在一些允许用户自定义栏目顺序的app(如:凤凰新闻、网易云音乐等),我们可以方便地拖拽列表项来完成列表的重新排序,进而完成对栏目顺序的重排。这个功能很人性化,而实现起来其实很简单(甚至都不用写什么后台代码),只有三步。

①把冰箱门打开

首先,我们需要让冰箱的大门敞开,也就是允许我们进行拖拽的相关操作。以ListView为例,注意下面几个属性。

<StackPanel>
    <ListView x:Name="list"
         AllowDrop="True"
         CanReorderItems="True"
         IsSwipeEnabled="True">
      <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
          <Setter Property="Background" Value="Gray"/>
          <Setter Property="Foreground" Value="White"/>
          <Setter Property="Margin" Value="4"/>
        </Style>
      </ListView.ItemContainerStyle>
    </ListView>
    <Button Click="Button_Click">Show Items</Button>
    <TextBlock x:Name="txt"/>
  </StackPanel>

AllowDrop属性允许元素进行拖动,它继承自UIElement基类,为所有可视元素支持。

CanReorderItems属性继承自ListViewBase基类,允许列表控件的项可以重新排序。

IsSwipeEnabled属性(swipe有“轻扫”之意)也需要设置为“True”,否则在触摸屏等输入设备下无法进行操作。相关的详尽说明在MSDN文档里有介绍(https://docs.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.Controls.ListViewBase),此部分摘录部分原文:

Remarks

Setting IsSwipeEnabled to false disables some default touch interactions, so it should be set to true when these interactions are needed. For example:

If item selection is enabled and you set IsSwipeEnabled to false, a user can deselect items by right-clicking with the mouse, but can't deselect an item with touch by using a swipe gesture.
If you set CanDragItems to true and IsSwipeEnabled to false, a user can drag items with the mouse, but not with touch.
If you set CanReorderItems to true and IsSwipeEnabled to false, a user can reorder items with the mouse, but not with touch.
You typically set IsSwipeEnabled to false to disable swipe animations when items in the view don't support interactions that use the swipe gesture, like deselecting, dragging, and reordering. Disabling the animation when it's not needed can improve the performance of your app.

(有趣的是最后一段:当列表不允许轻扫手势(撤销选定,拖动,拖拽重排)时,我们可以“显式”地将IsSwipeEnabled属性设置为False来提升应用的性能。)

②把大象装进去

前台ok后,我们就可以在后台加点东西,把我们的排序逻辑(其实并没有,微软已经写好了)添加进去。这个demo里,我用了一个按钮和一个文本框来观察重排的结果。如下:

public sealed partial class MainPage : Page
  {
    public MainPage()
    {
      this.InitializeComponent();
      for (int i = 0; i < 10; i++)
      {
        list.Items.Add($"-----THIS IS ITEM {i}-----");
      }
    }
    private void Button_Click(object sender, RoutedEventArgs e)
    {
      txt.Text = string.Empty;
      foreach (var item in list.Items)
      {
        txt.Text += item.ToString()[18] + " ";
      }
    }
  }

这样,重新排序后,点击按钮,我们即可观察到结果了。

③把冰箱门关上

把大象(?)装进去之后,最后就是我们的收尾工作了。显然,刚才的列表只是一个中间的载体,是我们待排序栏目的简单显示。一般而言,这个listview会安置在contentdialog或是popup里,那么怎么在重排后立即让父页面上的栏目得到相应,进行重排呢?我们用个预定义的委托即可,加在刚才的后台代码里(冰箱能装的东西其实挺多的)。

 public Action action;

然后在父页面注册方法,比如:

btn.Click += async (s, e) =>
       {
         var dialog = new Dialogs.Sort();
         dialog.action += async () => { await sortagain(); };
         await dialog.ShowAsync();
      };

以上所述是小编给大家介绍的Java实现拖拽列表项的排序功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • java swing中实现拖拽功能示例

    java实现拖拽示例 Swing中实现拖拽功能,代码很简单,都有注释,自己看,运行效果如下图: 复制代码 代码如下: package com; import java.awt.*;import java.awt.datatransfer.DataFlavor;import java.awt.dnd.DnDConstants;import java.awt.dnd.DropTarget;import java.awt.dnd.DropTargetAdapter;import java.awt.dn

  • Java实现鼠标拖拽移动界面组件

    默认的,Frame或者JFrame自身已经实现了鼠标拖拽标题栏移动窗口的功能. 只是,当你不满意java的JFrame样式,隐藏了标题栏和边框,又或者干脆直接使用JWindow,那你又该怎么实现鼠标拖拽移动窗口的目的呢?最开始,我简单的在mouseDragged方法里frame.setLocation(e.getX(), e.getY()),结果,frame拖拽的时候不停地闪烁,位置在屏幕上不断跳动.后来网上查资料,找到了答案. 这里给一个简单的示例,一看就明白: package com.jeb

  • Java实现拖拽列表项的排序功能

    在一些允许用户自定义栏目顺序的app(如:凤凰新闻.网易云音乐等),我们可以方便地拖拽列表项来完成列表的重新排序,进而完成对栏目顺序的重排.这个功能很人性化,而实现起来其实很简单(甚至都不用写什么后台代码),只有三步. ①把冰箱门打开 首先,我们需要让冰箱的大门敞开,也就是允许我们进行拖拽的相关操作.以ListView为例,注意下面几个属性. <StackPanel> <ListView x:Name="list" AllowDrop="True"

  • Android实现可拖拽列表和多选功能

    本文实例为大家分享了Android实现可拖拽列表和多选的具体代码,供大家参考,具体内容如下 这是我已经完成的一个已经上线的OA软件的一个模块,这个模块的功能不多,已经放到GitHub上面开源了,有感兴趣的朋友可以看看UIFrame 主窗口JAVA代码 /** * 编辑状态下长按拖动条目 * 1.通过ItemTouchHelper.Callback实现长按拖动 * 2.通过isEditable的值判断是否编辑状态,初值是false * 3.切换编辑状态要把isEditable的值取反,并改变复选框

  • Qt股票组件之自选股列表拖拽、右键常用菜单功能的实现

    一.开头嘴一嘴 本文带领大家来看看自选股列表的实现. 如果有需要的朋友可以加我好友,有偿提供源码.或者也可以进一步提供功能定制 封装的控件,或者demo都是没有样式的,所以看着会比较丑一些,不过加样式也是分分钟...这里咱可以先看功能,需要即可定制 本篇文章的自选股和大多数炒股软件一样,每一条自选都是支持拖拽的,拖拽时鼠标会跟随一个拖拽映像,并且鼠标移动时,会有拖拽提示,告知我们鼠标释放时拖拽项将会被插入到哪个位置.除过拖拽之外,自选股列表还支持右键菜单,都是一样常用的操作. 右键菜单包括置顶.

  • Android自定义ListView实现仿QQ可拖拽列表功能

    我们大致的思路,其实是这样子的,也是我的设想,我们可以先去实现一个简单的ListView的数据,但是他的Adapter,我们可以用系统封装好的,然后传递进去一个实体类,最后自定义一个listview去操作,所以我们先把准备的工作做好,比如? list_item.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.a

  • Java实现拖拽文件上传dropzone.js的简单使用示例代码

    Java实习生一枚,前端知识薄弱,最近因为工作需要,做了一个拖拽文件上传的功能,发现dropzone.js挺不错的,特地做个笔记. dropzonejs 的官网是:http://www.dropzonejs.com/, 中文手册是:http://wxb.github.io/dropzonejs.com.zh-CN/ 自己写的拖拽文件至一个按钮上传的功能,前端及java代码如下: jsp页面: 1. 首先必须引入dropzone的js和css文件 <link rel="stylesheet&

  • tp5框架基于Ajax实现列表无刷新排序功能示例

    本文实例讲述了tp5框架基于Ajax实现列表无刷新排序功能.分享给大家供大家参考,具体如下: 在后台管理的时候我们有时需要对数据进行排序,以控制数据在模板显示的顺序,排序的原理就是修改数据库,然后更新视图.我们可以单独写一个方法来实现排序的功能,成功后刷新页面,也可以利用Ajax技术,实现数据的局部请求,也就是无刷新排序的功能. 现在想要达到的效果是在排序的input框中输入数值,点击排序实现无刷新排序的功能. 首先是表格(cate.html)这一块我们要单独摘出来,放入到一个单独页面当中,方便

  • 自定义ListView实现拖拽ListItem项交换位置(附源码)

    写在前面的话 在上一篇实现了通过布局泵拿到不同布局为listitem布局,然后实现联系人的ListView,这一章要做的是拖拽ListView的Item项,本章原理是在上一篇博客基础之上的,上一篇博客:自定义Adapter并通过布局泵LayoutInflater抓取layout模板编辑每一个item 实现效果图 说明 首先我们看到的上面这张图就是实现的效果图了.拖动之后数据项完成交换位置. 功能剖析 我们看到做的这个效果是一个拖拽ListView的Item项位置的功能,在布局方面还是用基于布局泵

  • Python学习小技巧之列表项的排序

    本文介绍的是关于Python列表项排序的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 典型代码1: data_list = [6, 9, 1, 3, 0, 10, 100, -100] data_list.sort() print(data_list) 输出1: [-100, 0, 1, 3, 6, 9, 10, 100] 典型代码2: data_list = [6, 9, 1, 3, 0, 10, 100, -100] data_list_copy = sorted(data_li

  • react.js组件实现拖拽复制和可排序的示例代码

    在实现复制前,对之前的拖拽排序组件属性进行了修改. 摒弃了value中的content属性,拖拽组件暴露的render函数,利用这个属性进行组件内部子组件的渲染,这点主要是参考了蚂蚁金服的Ant design里面一些组件的设计. 为了实现Data和model的脱藕,和sortKey一样,组件增加codeKey属性. 拖拽复制的效果如下: 由于实现组件的核心是根据value数据来渲染页面,因此实现拖拽复制功能,只需要在"拖拽释放"的时候,将被拖拽方的数据放到当前目标所在的value数组中

  • vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序

    vue拖拽克隆clone组件API, vue.draggable实现盒子之间相互拖拽排序克隆(网上资源整理的文档) 效果图: -------------------------------------------------------------------------------- 首先需要安装vuedraggable依赖包: npm install vuedraggable --save 因为拖拽组件依赖sortablejs ,如果项目没有安装sortablejs ,可能需要安装一下 np

随机推荐