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. [C++]union联合体总结

    特点一:成员公用内存,且按所占内存最大的数据成员分配内存 //举例1 union A{ char a;//1个字节 int b;//4个字节 char c;//1个字节 } cout<<s ...

  2. UVA12412 A Typical Homework (a.k.a Shi Xiong Bang Bang Mang)

    简要题意 这道题就是要你维护一个学生成绩管理系统. 代码实现 程序设计 为了方便输出,我们定义了 println 函数: void println(string s){ cout<<s&l ...

  3. DVWA靶场实战(七)——SQL Injection

    DVWA靶场实战(七) 七.SQL Injection: 1.漏洞原理: SQL Inject中文叫做SQL注入,是发生在web端的安全漏洞,主要是实现非法操作,例如欺骗服务器执行非法查询,他的危害在 ...

  4. AIR32F103(八) 集成Helix MP3解码库播放MP3

    目录 AIR32F103(一) 合宙AIR32F103CBT6开发板上手报告 AIR32F103(二) Linux环境和LibOpenCM3项目模板 AIR32F103(三) Linux环境基于标准外 ...

  5. 阿里云kafka使用记录(python版本)

    kafka端   consumer vpc版代码   import socket from kafka import KafkaConsumer from kafka.errors import Ka ...

  6. Luogu P6394 樱花,还有你题解

    原题链接:樱花,还有你 $\scr{\color{DarkOrchid}{Solution}}$ Subtask1 这是一个送分的:总和都不到$n$,无论怎么收集,花瓣数肯定不到$n$,输出impos ...

  7. Kubernetes(k8s)控制器(二):DaemonSet

    目录 一.系统环境 二.前言 三.DaemonSet 概览 四.创建DaemonSet 4.1 创建daemonset 让其在k8s集群所有worker节点运行pod 4.2 创建daemonset让 ...

  8. FreeBSD 安装 fcitx5的配置

    link: Chinese Pinyin Package for typing Chinese sudo pkg install -y zh-CJKUnifonts sudo pkg install ...

  9. ES简介

    https://www.bbsmax.com/A/E35pW7LEJv/ 1 什么是ES ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式的全文搜索引擎,其对外服务是基 ...

  10. JZOJ 3447.摘取作物

    \(\text{Problem}\) 在一个矩阵里选数,每行最多选两个,每列最多选两个,最大会价值 \(n,m \le 30\) \(\text{Analysis}\) 对个这个限制如何实现? 跑费用 ...