1.21 Drag Drop使用

本实例测试Drag Drop;

运行结果:

Drag图标Drop到添加Icon,会将一条记录添加到Table;

Drag Table记录Drop到垃圾桶Icon,会将记录删除;

Group1中不同Tray可以交换位置;

Group2中不同Tray可以交换位置;

Setting:设置Group1,Group2是否可以Drag,Drop;

1.创建Component,View: V_DRAGDROP;

2.创建Context节点;

创建Node:NODE_INFO,保存Icon信息;

Attribute:NAME,类型String,Icon名称;

Attribute:DESC,类型String,Icon描述;

Attribute:PIC,类型String,Icon详细信息;

创建Node:NODE_PARAM,setting绑定值,设置group1,group2是否drag,drop enable;

Attribute:GP1_DRAG_ENABLE,类型WDY_BOOLEAN,设置是否group1 drag enable;

Attribute:GP1_DROP_ENABLE,类型WDY_BOOLEAN,设置是否group1 drop enable;

Attribute:GP2_DRAG_ENABLE,类型WDY_BOOLEAN,设置是否group2 drag enable;

Attribute:GP2_DROP_ENABLE,类型WDY_BOOLEAN,设置是否group2 drop enable;

3.创建Layout UI Element

创建Tray:TRAY1,包含Group1,Group2;

创建Group:GROUP1:

创建Image:IMG1~3;

分别设置source:

~IconLarge/SuccessMessage

~IconLarge/ErrorMessage

~IconLarge/HintMessage

创建DropTarget:DT1,onDrop:绑定Action,DROP;

DT1中创建Image:IMG4,source: trash.png,MIMES上传图片;

DT1中创建DropTargetInfo: DROPTARGETINFO,设置tags: delete;

创建Group:GROUP2:

创建DropTarget:DT2,onDrop:绑定Action,DROP;

DT2中创建TextView,设置text, 添加Icon;

DT2中创建DropTargetInfo: DROPTARGETINFO_1,设置tags: save*

创建Tray:TRAY2,包含GP21,GP22,GP23;

创建Group:GP21,

创建Tray1~Tray4;

创建Group:GP22,

创建Tray5~Tray6;

创建Group:GP23,

创建CheckBox,分别绑定Attribute:GP1_DRAG_ENABLE,Attribute:GP1_DROP_ENABLE, Attribute:GP2_DRAG_ENABLE, Attribute:GP2_DROP_ENABLE;

4.Attributes页签,变量定义;

5.实现Method页签方法

Method: INIT_DRAGDROP,初始化Tray2中group1,group2中drag,drop设置,在WDDOMODIFYVIEW方法中调用;

代码实例:

 "drag_source_info,drop_target_info,有这两个属性可以设置drag drop
  "Gridlayout:CL_WD_GRID_LAYOUT
  "MatrixLayout:CL_WD_MATRIX_LAYOUT
  DATA:lo_container TYPE REF TO cl_wd_uielement_container.
  DATA:lo_gridlayout TYPE REF TO cl_wd_grid_layout.
  DATA:lo_drag_source_info TYPE REF TO cl_wd_drag_source_info.
  DATA:lo_drop_target_info TYPE REF TO cl_wd_drop_target_info.   wd_this->v_drag_group = 'GROUP1'.   "获取容器
  lo_container ?= wd_this->v_view->get_element( 'GP21' ).
  lo_gridlayout ?= lo_container->get_layout( ).
  lo_gridlayout->set_on_drop( 'DROP_GP1' ).
  lo_drag_source_info = cl_wd_drag_source_info=>new_drag_source_info(
    bind_enabled = 'NODE_PARAM.GP1_DRAG_ENABLE'
    view = wd_this->v_view
    tags = 'gp1drag'
  ).
  lo_drop_target_info = cl_wd_drop_target_info=>new_drop_target_info(
      bind_enabled = 'NODE_PARAM.GP1_DROP_ENABLE'
      view = wd_this->v_view
      tags = 'gp1drag* drop'
  ).
  "绑定drag,drop
  lo_gridlayout->set_drag_source_info( lo_drag_source_info ).
  lo_gridlayout->set_drop_target_info( lo_drop_target_info ).   "获取容器
  lo_container ?= wd_this->v_view->get_element( 'GP22' ).
  lo_gridlayout ?= lo_container->get_layout( ).
  lo_gridlayout->set_on_drop( 'DROP_GP2' ).
  lo_drag_source_info = cl_wd_drag_source_info=>new_drag_source_info(
    bind_enabled = 'NODE_PARAM.GP2_DRAG_ENABLE'
    view = wd_this->v_view
    tags = 'gp2drag'
  ).
  lo_drop_target_info = cl_wd_drop_target_info=>new_drop_target_info(
      bind_enabled = 'NODE_PARAM.GP2_DROP_ENABLE'
      view = wd_this->v_view
      tags = 'gp2drag* drop'
  ).
  "绑定drag,drop
  lo_gridlayout->set_drag_source_info( lo_drag_source_info ).
  lo_gridlayout->set_drop_target_info( lo_drop_target_info ).

Method: MODIFY_VIEW,当Tray2中,Group1,Group2拖动顺序改变时,更新页面。在WDDOMODIFYVIEW方法中调用。

代码实例:

  DATA:lo_container TYPE REF TO cl_wd_uielement_container.
  DATA:lo_element TYPE REF TO cl_wd_uielement.
  DATA:lt_elements TYPE cl_wd_uielement_container=>tt_uielement.
  DATA:lo_grid_layout TYPE REF TO cl_wd_grid_layout.
  DATA:lo_grid_data TYPE REF TO cl_wd_grid_data.
  DATA:lv_grid_data TYPE string.
  DATA:lv_source_index TYPE i.
  DATA:lv_target_index TYPE i.   "获取容器
  IF wd_this->v_drag_group = 'GROUP1'.
    lo_container ?= wd_this->v_view->get_element( 'GP21' ).
  ELSEIF wd_this->v_drag_group = 'GROUP2'.
    lo_container ?= wd_this->v_view->get_element( 'GP22' ).
  ENDIF.   lt_elements = lo_container->get_children( ).
  "获取被拖动的element,以及初始位置
  LOOP AT lt_elements INTO lo_element.
    lv_source_index = sy-tabix.
    lo_grid_data ?= lo_element->get_layout_data( ).
    lv_grid_data = lo_grid_data->get_drag_data( ).
    IF lv_grid_data = wd_this->v_drag_data.
      EXIT.
    ENDIF.
  ENDLOOP.
  IF wd_this->v_drag_data IS NOT INITIAL.
    IF wd_this->v_drag_offset = -1.
      lv_target_index = wd_this->v_drag_index.
    ELSE.
      lv_target_index = wd_this->v_drag_index + 1.
    ENDIF.
    IF lv_source_index < lv_target_index.
      lv_target_index = lv_target_index - 1.
    ENDIF.
    "移除再添加element
    lo_container->remove_child( index = lv_source_index ).
    lo_container->add_child( the_child = lo_element index = lv_target_index ).
  ENDIF. 

Method: ONACTIONDROP,Action:DROP对应方法;

代码实例:

DATA:lo_node TYPE REF TO if_wd_context_node.
  DATA:lo_element TYPE REF TO if_wd_context_element.
  DATA:lt_info TYPE wd_this->elements_node_info.
  DATA:ls_info TYPE wd_this->element_node_info.
  DATA:lo_event TYPE REF TO cl_wd_custom_event.
  DATA:lv_tags TYPE string.
  DATA:lv_index TYPE I.   lo_event = wdevent.
  lv_tags = tags.
  "lv_tags = lo_event->get_string( name = 'TAGS' ).
  "获取节点
  lo_node = wd_context->get_child_node( wd_this->wdctx_node_info ).
  lo_node->get_static_attributes_table( IMPORTING table = lt_info ).   CASE lv_tags.
    WHEN 'save_success'.
      READ TABLE lt_info INTO ls_info WITH KEY name = 'ICON_SUCCESS'.
      IF sy-subrc <> 0.
        ls_info-name = 'ICON_SUCCESS'.
        ls_info-desc = 'success'.
        ls_info-pic = '~IconLarge/SuccessMessage'.
        APPEND ls_info TO lt_info.
      ENDIF.     WHEN 'save_info'.
      READ TABLE lt_info INTO ls_info WITH KEY name = 'ICON_INFO'.
      IF sy-subrc <> 0.
        ls_info-name = 'ICON_INFO'.
        ls_info-desc = 'information'.
        ls_info-pic = '~IconLarge/HintMessage'.
        APPEND ls_info TO lt_info.
      ENDIF.
    WHEN 'save_error'.
      READ TABLE lt_info INTO ls_info WITH KEY name = 'ICON_ERROR'.
      IF sy-subrc <> 0.
        ls_info-name = 'ICON_ERROR'.
        ls_info-desc = 'error'.
        ls_info-pic = '~IconLarge/ErrorMessage'.
        APPEND ls_info TO lt_info.
      ENDIF.
    WHEN 'delete'.
      "获取选择行
      lv_index = lo_node->get_lead_selection_index( ).
      DELETE lt_info INDEX lv_index.
  ENDCASE.   lo_node->bind_table( new_items = lt_info set_initial_elements = abap_true ). 

Method: ONACTIONDROP_GP1,Action:DROP_GP1,处理group1中drop;

代码实例:

  DATA:lo_event TYPE REF TO cl_wd_custom_event.
  lo_event = wdevent.
  wd_this->v_drag_data = lo_event->get_string( 'DATA' ).
  wd_this->v_drag_tags = lo_event->get_string( 'TAGS' ).
  wd_this->v_drag_index = lo_event->get_int( 'INDEX' ).
  wd_this->v_drag_offset = lo_event->get_int( 'OFFSET' ).
  wd_this->v_drag_id = lo_event->get_string( 'ID' ).   "group
  wd_this->v_drag_group = 'GROUP1'.

Method: ONACTIONDROP_GP2,Action:DROP_GP2,处理group2中drop;

代码实例:

  DATA:lo_event TYPE REF TO cl_wd_custom_event.
  lo_event = wdevent.
  wd_this->v_drag_data = lo_event->get_string( 'DATA' ).
  wd_this->v_drag_tags = lo_event->get_string( 'TAGS' ).
  wd_this->v_drag_index = lo_event->get_int( 'INDEX' ).
  wd_this->v_drag_offset = lo_event->get_int( 'OFFSET' ).
  wd_this->v_drag_id = lo_event->get_string( 'ID' ).   "group
  wd_this->v_drag_group = 'GROUP2'.

WDA学习(28):Drag &Drop使用的更多相关文章

  1. HTML 学习笔记 (drag & drop)

    拖放(Drag & Drop)是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放.过去,我们用监听鼠标的Mousedown.Mouseo ...

  2. Win10/UWP新特性—Drag&Drop 拖出元素到其他App

    在以前的文章中,写过微软新特性Drag&Drop,当时可能由于处于Win10预览版,使用的VS也是预览版,只实现了从桌面拖拽文件到UWP App中,没能实现从UWP拖拽元素到Desktop A ...

  3. Android drag drop

    最近偶尔知道了锤子的one step,所以在网上看相关的东西,有人说android原生drag drop就能实现,我就去学习一下这个drag drop,下面把学习到的东西总结一下: drag drop ...

  4. Atitit。D&D drag&drop拖拽功能c#.net java swing的对比与实现总结

    Atitit.D&D drag&drop拖拽功能c#.net java swing的对比与实现总结 1. 实现一个D&D操作一般包括三个步骤: 1 2. .net黑头的拖曳机制 ...

  5. 【重点突破】——Drag&Drop拖动与释放

    一.引言 在学习HTML5新特性的时候,学到了Drag&Drop这两种拖放API,这里根据拖动的是“源对象”还是“目标对象”做两个小练习,主要是为了理解与应用HTML5为拖放行为提供的7个事件 ...

  6. HTML5魔法堂:全面理解Drag & Drop API

    一.前言    在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面 ...

  7. Draggabilly – 轻松实现拖放功能(Drag & Drop)

    Draggabilly 是一个很小的 JavaScript 库,专注于拖放功能.只需要简单的设置参数就可以在你的网站用添加拖放功能.兼容 IE8+ 浏览器,支持多点触摸.可以灵活绑定事件,支持 Req ...

  8. JS魔法堂:IE5~9的Drag&Drop API

    一.前言     < HTML5魔法堂:全面理解Drag & Drop API>中提到从IE5开始已经支持DnD API,但IE5~9与HTML5的API有所不同,下面我们来了解一 ...

  9. 重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop

    [源码下载] 重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop 作者:weba ...

  10. [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

    人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...

随机推荐

  1. ABP Framework 手动升级指南:从6.0.1升级到7.0.0

    ABP 7.0.0 正式版已经发布,ABP-Framework-All-In-One 项目同步升级. LeptonX Lite Theme 目前还没有包含在源码解决方案中,还是以 Nuget 包提供, ...

  2. BC3-牛牛学说话之-整数

    题目描述 牛牛刚刚出生,嗷嗷待哺,一开始他只能学说简单的数字,你跟他说一个整数,他立刻就能学会.输入一个整数,输出这个整数. 输入描述 输入一个整数,范围在32位有符号整数范围内 输出描述 输出这个整 ...

  3. 【转】C#接口知识

    参考:日常收集 C# 接口知识 (知识全面) 目录 第一节 接口慨述 第二节 定义接口 第三节 定义接口成员 第四节.访问接口 第五节.实现接口 第六节.接口转换 第七节.覆盖虚接口 第一节 接口慨述 ...

  4. vue构建打包兼容操作(vue代码规范建议)-转载Vuejs项目不改动一行代码同时支持用Rollup,vue-cli,parcel构建的一些建议

  5. HashSet集合介绍-哈希值

    HashSet集合介绍 java.util.HashSet是set 接口的一个实现类,它所存储的元素是不可重复的,并且元素都是无序的(即存取顺序不一致).java.util.HashSet底层的实现其 ...

  6. Unity之详解Texture

    [Texture]详解什么是Texture 前言 开篇废话 嗨咯大家好呀,时隔多日,小黑又和大家见面咯,最近懒癌犯了,而且技术上边倍受打击,所以回了家只想着睡觉休息,所以希望大家见谅见谅啦. Unit ...

  7. Unity_UIWidgets - 组件Scaffold

    UIWidgets - 组件Scaffold 各位兄弟姐妹,想通过Unity来开发UIWidgets的么,想通过UIWi的gets..来开发手机APP么??想么想么,哈哈哈哈哈哈哈哈. 好了,小黑不唠 ...

  8. ASP.NET Core 系列总结

    <ASP.NET Core> 系列文章基于 .NET 3.1 和 .NET 6,主要是系统总结自己日常工作和学习中的知识点,之前是自己在 OneNote 上自己写,作为学习.总结笔记,逐渐 ...

  9. 编写antd的Cascader 级联选择组件市级地区数据

    下面是该组件的使用数据的格式 options: [ { value: 'zhejiang', label: 'Zhejiang', children: [ { value: 'hangzhou', l ...

  10. 我这.NET菜鸟,用它开发RabbitMQ消息队列后,竟被老板一夜提拔为架构师

    [讲故事] 自2022年末推出此工具以来,相关文章已被圈内顶尖的几家.NET头条号转载,而且短短数月,已有超100个团队/个人开发者使用它来操控RabbitMQ消息队列,反响可谓十分火爆.故本次经典重 ...