flex 的 list 中相互拖拉产生的问题

本文介绍了一种在Flash中实现两个列表之间的拖拽功能的方法,包括如何保持源列表内容不变,以及如何允许目标列表中的内容重复并可通过内部拖动调整顺序。通过具体的代码示例,展示了如何使用dragInitiator和currentTarget进行源和目标列表的判断。

假如你有需要定义两个list,并且希望把一个list1 的内容拖到另一个list2中,并且list1的内容不变,而且list2中内容可以重复,而且list2可以通过在内部拖拉以达到调整顺序的目的。

因为两个 list 要相互拖拉必须都定义dropEnabled="true" dragEnabled="true" 那么要保证在内部拖拉不会出问题的话必须得判断你拖拉的源list和目标list,然后判断是不是同一个!

用方法var SDrag:List = event.dragInitiator as List ;var dropTarget:List=List(event.currentTarget);

主要代码如下:由于商业应用,所以不能提供整个项目。

<mx:List height="410" width="200" id="mediaList"
        dataProvider="{mdp}"
        itemRenderer="com.controls.Movieitem"
        doubleClickEnabled="true" 
         dropEnabled="true"
          dragEnabled="true"
          dragMoveEnabled="false"  
            dragDrop="doDropHandler(event)"
            doubleClick="mediaPlay()" />

<mx:List height="410" width="200" id="mediaScheduleList" 
        dataProvider="{nmsdp}"
        itemRenderer="com.controls.Movieitem"
        dragMoveEnabled="true"
        dragEnabled="true"
        dropEnabled="true"
         
        doubleClickEnabled="true"
        doubleClick="mediaPlayOther()"
        dragDrop="doDragDrop(event)"/>

private function doDragDrop(event:DragEvent):void {
      //event.currentTarget
      //flag="MEDIASCHEDULELIST";
      var SDrag:List = event.dragInitiator as List ;
      
      if(List(event.currentTarget)==mediaScheduleList && SDrag==mediaScheduleList)
      {
      Alert.show("vvvv","右边拉来拉去");
      //逆向考虑
               }
      else{  //检测数据结构
          Alert.show("右边拉来拉去222","右边拉来拉去222");
          if (event.dragSource.hasFormat("items")){
    
           //取消默认事件处理                  
           event.preventDefault();
           event.currentTarget.hideDropFeedback(event);
           //获取拖拽接收对象
           var dropTarget:List=List(event.currentTarget);
    
           //获取拖拽对象数据
           var itemsArray:Array = event.dragSource.dataForFormat("items") as Array;
           //获取拖拽对象数据第一项
           var m:Media = new Media();
           m.fill(itemsArray[0] as Media);
           //获取插入位置
           var dropLoc:int = dropTarget.calculateDropIndex(event);
           //插入项   
           //IList(dropTarget.dataProvider).addItemAt(m, dropLoc);
           nmsdp.addItemAt(m, dropLoc);
           //Alert.show("abc",nmsdp[dropLoc].Thumb);
          
           }
           mdp.refresh();
      }
   }
                               

private function doDropHandler(event:DragEvent):void
            {
             
                
                var SDrag:List = event.dragInitiator as List ;
                var dropTarget:List=List(event.currentTarget);
                if (dropTarget==mediaList && SDrag==mediaList )
                {
                   //Alert.show("从左边拉到左边","从左边拉到左边");
                   mdp.refresh();
                   var gid:String="admin";//测试
                   myMoviesSchedule.getMediaByGroup.send(gid);
                }
                else
                {
                   //把右列表的媒体ARRAY减少一个.刷新dataprovider以达到 代替重新搜寻数据库
                   //this.addMediaSchedule();
                   mdp.refresh();
                   //var select:String=mediaScheduleList.selectedItem.MediaID.toString();
                   nmsdp.removeItemAt(mediaScheduleList.selectedIndex);
                }
            }

<template> <view class=""> <view class="top-card"> <view class="top-card-tx ml20">头像</view> <view class="ml20"> <view class="f24">张三</view> <view class="f15">销售一区</view> </view> </view> <view class="card1 mt5"> <view class="card-1 bg1 br10 pt10 pb10"> <view class="card-1-1 p10"> <view class="f15">今日待办任务</view> <view class="f28 fw800 mt5">24</view> </view> <view class="card-1-2 img1"></view> </view> <view class="card-1 bg2 br10"> <view class="card-1-1 p10"> <view class="f15">今日待处理预警</view> <view class="f28 fw800 mt5">5</view> </view> <view class="card-1-2 img2"></view> </view> </view> <view class="card2 br10"> <view class="pl10"> <view class=""> 让办公和管理更高效率 </view> <view class="f10 fw200 tb"> 数据清晰可见,功能完备,高效沟通,让办公拖拉 </view> </view> </view> <!-- <image src="/static/my/my_bg_1.png">图片</image> --> <view class="cs"> <uni-list> <uni-list-item title="今日新闻" showArrow>1</uni-list-item> <uni-list-item title="今日新闻" showArrow>2</uni-list-item> </uni-list> </view> </view> </template> <script> import uniList from '@/uni_modules/uni-list/components/uni-list/uni-list.vue' import uniListItem from '@/uni_modules/uni-list/components/uni-list-item.vue' export default { components: { uniList, uniListItem }, data(){ return{}; } } </script> <style lang="scss"> @import "../index.scss"; page { color:rgba(33,62,97,1); } .cs{ height: 200px; width: 100px; border:1px solid red; } //顶部个人信息模块 .top-card{ height: 100px; display: flex; align-items: center; .top-card-tx{ width: 80px; height: 80px; border-radius: 40px; background-color: #fff; } } //待办任务和预警 .card1{ display: flex; justify-content: space-around; .card-1{ width: 46%; display: flex; align-items: center; .card-1-1{ width: 60%; } .card-1-2{ height: 40px; width: 40px; } .img1{ background-image: url('/static/my/my_task.png'); background-size: 55px 60px; } .img2{ background-image: url('/static/my/my_err.png'); background-size: 40px 40px; } } .bg1{ background-color: #fff; } .bg2{ background-color: rgba(255, 247, 241, 1); } } //中部框 .card2{ margin-top: 20px; margin: 10px; height: 100px; line-height: 20px; background-color: #cb9dff; // background-image: url('../../static/my/my_bg_1.png'); display: flex; align-items: center; } </style>为什么页面无法渲染uni-list组件
09-11
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值