精华内容
下载资源
问答
  • 拖拽式文件排序改名工具
  • 拖拽用的是vuedraggable是标准的组件封装,并且将可拖动元素放进了transition-group上面,过渡动画都比较好。 html 页面 打开拖拽按钮 <el-button circle size="small" @click="handleOpen" icon="el-ico.....

    表头拖拽排序应用的是不同人员对数据关注点不一样,表格太长,可以把主要关注的列拖拽排序到前面,方便查看。

    然后把当前用户,当前页面的排序记录在本地缓存,这样用户在下次登陆仍然能够使用自己的排序。

    拖拽用的是vuedraggable 是标准的组件式封装,并且将可拖动元素放进了 transition-group 上面,过渡动画都比较好。

    html 页面

    打开拖拽按钮

    <el-button circle size="small" @click="handleOpen" icon="el-icon-sort"></el-button>

    拖拽组件

    <sort-header :dialogShow="sortHeaderDialogShow"
                 :columnList="currentOptionColumns"
                 @beforeClose="sortHeaderDialogClose"
                 @handSubmit="handSortByCacheSubmit"
    ></sort-header>

    因为所有的页面都要使用这个拖拽排序,所以把方法集中在mixins里面,方便调用。

    下面是mixins页面

    import {deepClone} from "@/util/util";
    export default {
      data(){
        return {
          //列排序
          sortHeaderDialogShow: false,
          defaultOption: 'option',
          currentOptionColumns: [],
          //导出excel
          exportExcelShow:false,
        }
      },
      created() {
        //初始化
        this.currentOptionColumns = this[this.defaultOption].column;
      },
      mounted(){
        this.getSortByCache();
      },
      watch: {
        'defaultOption'(val) {
          if (val) {
            //监听,当前的option名称变动时刷新当前的列
            this.currentOptionColumns = this[this.defaultOption].column;
          }
        }
      },
      methods:{
        /**
         * 打开排序弹窗
         */
        handleOpen(){
          this.sortHeaderDialogShow = true
        },
    
        /**
         * 获取排序缓存
         */
        getSortByCache() {
          let currentUrl = this.$router.history.current.fullPath
          let saveAccount = JSON.parse(localStorage.getItem("saber-userInfo")).content.account
          let defaultOption = this.defaultOption;
          let cache = localStorage.getItem(`${currentUrl}-${defaultOption}_${saveAccount}`)
          if(cache) {
            let columns = JSON.parse(cache);
            //重排序并进行覆盖
            let list = this.againSort(this.option.column, columns);
            // debugger
            this[this.defaultOption].column = list;
          }
        },
        /**
         * 关闭弹窗方法
         * 通过修改子的变量进行修改
         * 组件会向下传递关闭父弹窗
         */
        sortHeaderDialogClose() {
          this.sortHeaderDialogShow = false
        },
        /**
         * 弹窗确认提交
         * 对列进行重排序
         * 修改当前页面对应的排序组件
         * @param columns 重排序的列数组
         */
        handSortByCacheSubmit(columns) {
          let currentUrl = this.$router.history.current.fullPath
          let saveAccount = JSON.parse(localStorage.getItem("saber-userInfo")).content.account
          let defaultOption = this.defaultOption;
          localStorage.setItem(`${currentUrl}-${defaultOption}_${saveAccount}`,JSON.stringify(columns))
          let list = this.againSort(this[this.defaultOption].column, columns);
    
          // debugger
          this[this.defaultOption].column = list;
          this.sortHeaderDialogClose();
        },
    
        /**
         * 重新排序
         */
        againSort(optionColumn, columns) {
          let tempColumn = deepClone(optionColumn);
          let list = [];
          columns.forEach(item =>{
            for (let i = 0; i < tempColumn.length; i++) {
              let c = tempColumn[i];
              if(c.prop == item.key) {
                list.push(c);
                //移除
                tempColumn.splice(i, 1);
                break;
              }
            }
          })
          //把不存在的加入到集合的最后面
          list.push(... tempColumn);
          return list;
        }
    
      }
    }
    
    

    组件详情

    <template>
      <el-dialog
              title="列排序"
              :visible.sync="dialogShow"
              :close-on-click-modal="false"
              width="60%"
              append-to-body
              @open="initCloumn"
              :before-close="handClose">
        <div class="box scrollbar-5">
          <draggable style="display: flex;flex-wrap: wrap;" id="myArray" v-model="column" animation="150">
            <!--固定排序的跟隐藏的不列出来-->
            <div class="tag" v-for="item in column" :key="item.key" v-if="item.fixed !=true && item.hide != true">
              {{item.value}}
            </div>
          </draggable>
        </div>
        <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="handSubmit">确 定</el-button>
              <el-button @click="handClose">取 消</el-button>
          </span>
      </el-dialog>
    </template>
    
    <script>
      import draggable from "vuedraggable"
      export default {
        components: {
          draggable
        },
        props: {
          /**
           * 弹窗
           */
          dialogShow: {
            type: Boolean,
            default: false
          },
          columnList: {
            type: Array,
            default: () => {return []}
          }
        },
        data() {
          return {
            column: []
          };
        },
        methods: {
          initCloumn() {
            this.column = [];
            this.columnList.forEach(res =>{
    
              this.column.push({
                fixed:res.fixed,
                hide:res.hide,
                key: res.prop,
                value: res.label
              })
            })
          },
          handSubmit() {
            this.$emit('handSubmit', this.column)
          },
          handClose() {
            this.$emit('beforeClose', this.column)
          }
        },
      };
    </script>
    
    <style scoped>
      .tag{
        padding: 5px 10px;
        border: 1px solid #c0c4cf;
        border-radius: 9px;
        margin: 5px;
        cursor:pointer;
      }
    </style>
    

     

    展开全文
  • 一个轻量级的非侵入的方式实现RecyclerView拖拽排序.rar,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
  • 源码DynamicRecyclerView,一个轻量级的,非侵入的方式实现RecyclerView拖拽排序,滑动删除的库,非侵入的意思是指它没有使用自定义的RecyclerView或者是LayoutManager,所以适用范围更广。该库的意义不在于其...
  • 用Struts1开发拖拽式

    2016-03-10 04:58:14
    【急】求大神们指教如何开发拖拽式树?拖拽节点到目标节点后对应的节点ID如何保存至数据库排序
  • MUURI – 响应、可排序、可拖拽的布局插件 原文:http://www.shejidaren.com/muuri.html 流布局是目前觉的用于图像类布局的展示方式之一,最觉就是花瓣、Pinterest,而这类布局也有很多,比如之前介绍的《有用的...

    MUURI – 响应式、可排序、可拖拽的布局插件

    原文:http://www.shejidaren.com/muuri.html

    流布局是目前觉的用于图像类布局的展示方式之一,最觉就是花瓣、Pinterest,而这类布局也有很多,比如之前介绍的《有用的jQuery布局插件推荐》,今天主要向大家介绍MUURI,它的特色是支持响应式、排序、筛选以及拖拽布局元素。

    下面来看看介绍:

    插件名称:MUURI
    网站地址:https://haltu.github.io/muuri/

    拖拽式排序

    通过鼠标随意拖拽

    多种对齐方式

    比如左上、右上,左右两端对齐等。

    筛选

    根据标题内容进行筛选,筛选时切的的动画非常流畅。

    使用方法

    STEP 1: 将 Muuri 的 js 嵌入到页面中,其中「velocity.js」是动画,「Hammer.js」则是实现拖拽,如果不需要,可以不嵌入。

    <script src="velocity.js"></script>
    <script src="hammer.js"></script>
    <!-- muuri.js 需要嵌入到 body 内-->
    <script src="muuri.js"></script>

    STEP 2: html代码结构

    <div class="grid">
    
      <div class="item">
        <div class="item-content">
          这里是你的内容
        </div>
      </div>
    
      <div class="item">
        <div class="item-content">
          <div class="my-custom-content">
            Yippee!
          </div>
        </div>
      </div>
    
    </div>
    推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

    转载于:https://www.cnblogs.com/jiangyuzhen/p/10946434.html

    展开全文
  • 标签:「iOS」「拖拽式控件」「QiDragView」 作者: MrLiuQ 审校: QiShare团队 首先,我们先看一下QiDragView的效果图: 一、QiDragView整体架构设计 话不多说,上架构图~ QiDragView(QiDragSortView的简称)...

    级别: ★★☆☆☆
    标签:「iOS」「拖拽式控件」「QiDragView」
    作者: MrLiuQ
    审校: QiShare团队


    首先,我们先看一下QiDragView的效果图:

    一、QiDragView整体架构设计

    话不多说,上架构图~

    QiDragView(QiDragSortView的简称)是一种可选择可拖拽的自定义控件,可以满足一些拖拽排序的业务需求场景。

    二、如何自定义使用QiDragView?

    在上Demo之前,先介绍几个可以自定义的UI配置属性:

    属性 类型 介绍
    rowHeight CGFloat 行高
    rowMargin CGFloat 行边距
    rowPadding CGFloat 行间距
    columnMargin CGFloat 列边距
    columnPadding CGFloat 列间距
    columnCount NSInteger 列数
    normalColor UIColor 按钮基本字体颜色
    selectedColor UIColor 按钮选择字体颜色

    以及一些逻辑配置属性:

    属性 类型 介绍
    enabledTitles NSArray<NSString *> 可以被点击的titles(上行参数,默认全选)
    selectedTitles NSArray<NSString *> 可以被选择的titles(上行参数,默认全选)
    titles NSArray<NSString *> 按钮的titles(上行参数,会根据titles,创建出对应的button)

    使用起来也很方便:

    • 直接设置titles即可创建出对应title的Buttons。
    • 通过dragSortEnded的block方法回调,处理拖拽后的业务逻辑:按钮的排序、按钮是否选择等属性

    默认配置用法:

    QiDragSortView *dragSortView = [[QiDragSortView alloc] initWithFrame:CGRectMake(.0, 100.0, self.view.bounds.size.width, .0)];
    dragSortView.backgroundColor = [[UIColor lightGrayColor] colorWithAlphaComponent:.5];
    
    dragSortView.titles = @[@"首页推荐", @"奇舞周刊", @"众成翻译", @"QiShare", @"HULK一线杂谈", @"Qtest之道"];//!< 初始的Buttons(必填)
    [self.view addSubview:dragSortView];
    
    //! 拖拽方法回调:能拿到Button数组的排序和选择状态
    dragSortView.dragSortEnded = ^(NSArray<UIButton *> * _Nonnull buttons) {
        for (UIButton *button in buttons) {
            NSLog(@"title: %@, selected: %i", button.currentTitle, button.isSelected);
        }
    };
    复制代码

    自定义配置用法:

    QiDragSortView *dragSortView = [[QiDragSortView alloc] initWithFrame:CGRectMake(.0, 100.0, self.view.bounds.size.width, .0)];
    dragSortView.backgroundColor = [[UIColor lightGrayColor] colorWithAlphaComponent:.5];
    dragSortView.rowHeight = 50.0;
    dragSortView.rowMargin = 30.0;
    dragSortView.rowPadding = 20.0;
    dragSortView.columnCount = 3;
    dragSortView.columnMargin = 30.0;
    dragSortView.columnPadding = 20.0;
    dragSortView.normalColor = [UIColor redColor];
    dragSortView.selectedColor = [UIColor purpleColor];
    dragSortView.enabledTitles = @[@"奇舞周刊", @"众成翻译", @"QiShare", @"HULK一线杂谈", @"Qtest之道"];//!< 可以点击选择的Buttons(选填,默认全选)
    dragSortView.selectedTitles = @[@"首页推荐", @"HULK一线杂谈", @"Qtest之道"];//!< 初始选择的Buttons(选填,默认全选)
    dragSortView.titles = @[@"首页推荐", @"奇舞周刊", @"众成翻译", @"QiShare", @"HULK一线杂谈", @"Qtest之道"];//!< 初始的Buttons(必填)
    [self.view addSubview:dragSortView];
    
    //! 拖拽方法回调:能拿到Button数组的排序和选择状态
    dragSortView.dragSortEnded = ^(NSArray<UIButton *> * _Nonnull buttons) {
        for (UIButton *button in buttons) {
            NSLog(@"title: %@, selected: %i", button.currentTitle, button.isSelected);
        }
    };
    复制代码

    三、QiDragView的技术点

    3.1 长按手势:

    长按手势分别对应三种状态:UIGestureRecognizerStateBeganUIGestureRecognizerStateChangedUIGestureRecognizerStateEnded

    状态 说明
    UIGestureRecognizerStateBegan 长按手势开始
    UIGestureRecognizerStateChanged 长按手势拖拽中(进行时)
    UIGestureRecognizerStateEnded 长按手势结束
    //! 长按手势
    - (void)longPress:(UILongPressGestureRecognizer *)gesture {
        
        UIButton *currentButton = (UIButton *)gesture.view;
        
        if (gesture.state == UIGestureRecognizerStateBegan) {
            
            [self bringSubviewToFront:currentButton];
            
            [UIView animateWithDuration:.25 animations:^{
                self.originButtonCenter = currentButton.center;
                self.originGesturePoint = [gesture locationInView:currentButton];
                currentButton.transform = CGAffineTransformScale(currentButton.transform, 1.2, 1.2);
            }];
        }
        else if (gesture.state == UIGestureRecognizerStateEnded) {
            
            [UIView animateWithDuration:.25 animations:^{
                currentButton.center = self.originButtonCenter;
                currentButton.transform = CGAffineTransformIdentity;
            } completion:^(BOOL finished) {
                if (self.dragSortEnded) {
                    self.dragSortEnded(self.buttons);
                }
            }];
        }
        else if (gesture.state == UIGestureRecognizerStateChanged) {
            
            CGPoint gesturePoint = [gesture locationInView:currentButton];
            CGFloat deltaX = gesturePoint.x - _originGesturePoint.x;
            CGFloat deltaY = gesturePoint.y - _originGesturePoint.y;
            currentButton.center = CGPointMake(currentButton.center.x + deltaX, currentButton.center.y + deltaY);
            
            NSInteger fromIndex = currentButton.tag;
            NSInteger toIndex = [self toIndexWithCurrentButton:currentButton];
            
            if (toIndex >= 0) {
                currentButton.tag = toIndex;
                
                if (toIndex > fromIndex) {
                    for (NSInteger i = fromIndex; i < toIndex; i++) {
                        UIButton *nextButton = _buttons[i + 1];
                        CGPoint tempPoint = nextButton.center;
                        [UIView animateWithDuration:.5 animations:^{
                            nextButton.center = self.originButtonCenter;
                        }];
                        _originButtonCenter = tempPoint;
                        nextButton.tag = i;
                    }
                }
                else if (toIndex < fromIndex) {
                    for (NSInteger i = fromIndex; i > toIndex; i--) {
                        UIButton *previousButton = self.buttons[i - 1];
                        CGPoint tempPoint = previousButton.center;
                        [UIView animateWithDuration:.5 animations:^{
                            previousButton.center = self.originButtonCenter;
                        }];
                        _originButtonCenter = tempPoint;
                        previousButton.tag = i;
                    }
                }
                [_buttons sortUsingComparator:^NSComparisonResult(UIButton *obj1, UIButton *obj2) {
                    return obj1.tag > obj2.tag;
                }];
            }
        }
    }
    复制代码

    3.2 配置按钮:

    设计思路:在属性titles的setter方法中,初始化并配置好各个Buttons。

    - (void)setTitles:(NSArray<NSString *> *)titles {
        
        _titles = titles;
        
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(.01 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            NSInteger differCount = titles.count - self.buttons.count;
            
            if (differCount > 0) {
                for (NSInteger i = self.buttons.count; i < titles.count; i++) {
                    [self.buttons addObject:[self buttonWithTag:i]];
                }
            }
            else if (differCount < 0) {
                NSArray *extraButtons = [self.buttons subarrayWithRange:(NSRange){titles.count, self.buttons.count - titles.count}];
                [self.buttons removeObjectsInArray:extraButtons];
                for (UIButton *button in extraButtons) {
                    [button removeFromSuperview];
                }
            }
            
            self.enabledTitles = self.enabledTitles ?: titles;//!< 如果有,就传入,否则传入titles
            self.selectedTitles = self.selectedTitles ?: titles;
            
            for (NSInteger i = 0; i < self.buttons.count; i++) {
                [self.buttons[i] setTitle:titles[i] forState:UIControlStateNormal];
                [self.buttons[i] addGestureRecognizer:[[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longPress:)]];//!< 长按手势
                [self selectButton:self.buttons[i] forStatus:[self.selectedTitles containsObject:titles[i]]];
                if ([self.enabledTitles containsObject:titles[i]]) {
                    [self.buttons[i] addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
                }
            }
            
            for (NSInteger i = 0; i < self.buttons.count; i++) {
                NSInteger rowIndex = i / self.columnCount;
                NSInteger columnIndex = i % self.columnCount;
                CGFloat buttonWidth = (self.bounds.size.width - self.columnMargin * 2 - self.columnPadding * (self.columnCount - 1))  / self.columnCount;
                CGFloat buttonX = self.columnMargin + columnIndex * (buttonWidth + self.columnPadding);
                CGFloat buttonY = self.rowMargin + rowIndex * (self.rowHeight + self.rowPadding);
                self.buttons[i].frame = CGRectMake(buttonX, buttonY, buttonWidth, self.rowHeight);
            }
            
            CGRect frame = self.frame;
            NSInteger rowCount = ceilf((CGFloat)self.buttons.count / (CGFloat)self.columnCount);
            frame.size.height = self.rowMargin * 2 + self.rowHeight * rowCount  + self.rowPadding * (rowCount - 1);
            self.frame = frame;
        });
    }
    复制代码

    源码地址:QiDragView


    小编微信:可加并拉入《QiShare技术交流群》。

    关注我们的途径有:
    QiShare(简书)
    QiShare(掘金)
    QiShare(知乎)
    QiShare(GitHub)
    QiShare(CocoaChina)
    QiShare(StackOverflow)
    QiShare(微信公众号)

    推荐文章:
    iOS Wireshark抓包
    iOS Charles抓包
    初探TCP
    IP、UDP初探
    奇舞周刊

    展开全文
  • vue.js 拖拽排序 vue-smooth-dnd (vue-smooth-dnd) A fast and lightweight drag&drop, sortable library for Vue.js with many configuration options covering many d&d scenarios. 用于Vue.js的快速,...

    vue.js 拖拽排序

    vue-smooth-dnd (vue-smooth-dnd)

    A fast and lightweight drag&drop, sortable library for Vue.js with many configuration options covering many d&d scenarios.

    用于Vue.js的快速,轻巧的拖放式可排序库,具有许多配置选项,涵盖了许多d&d场景。

    This library consists wrapper Vue.js components over smooth-dnd library.

    该库由smooth-dnd库组成的包装Vue.js组件。

    Show, don't tell !

    显示,不告诉!

    安装 (Installation)

    npm i vue-smooth-dnd

    用法 (Usage)

    Vue (Vue)

    <template>
      <div>
        <div class="simple-page">
            <Container @drop="onDrop">            
              <Draggable v-for="item in items" :key="item.id">
                <div class="draggable-item">
                  {{item.data}}
                </div>
              </Draggable>
            </Container>
        </div>
      </div>
    </template>
    
    <script>
    import { Container, Draggable } from "vue-smooth-dnd";
    import { applyDrag, generateItems } from "./utils";
    export default {
      name: "Simple",
      components: { Container, Draggable },
      data: function() {
        return {
          items: generateItems(50, i => ({ id: i, data: "Draggable " + i }))
        };
      },
      methods: {
        onDrop: function(dropResult) {
          this.items = applyDrag(this.items, dropResult);
        }
      }
    };
    </script>

    API (API)

    容器 (Container)

    Component that contains the draggable elements or components. Each of its children should be wrapped by Draggable component

    包含可拖动元素或组件的组件。 它的每个子级都应由Draggable组件包装

    物产 (Properties)

    Property Type Default Description
    :orientation string vertical Orientation of the container. Can be horizontal or vertical.
    :behaviour string move Property to describe weather the dragging item will be moved or copied to target container. Can be move or copy.
    :group-name string undefined Draggables can be moved between the containers having the same group names. If not set container will not accept drags from outside. This behaviour can be overriden by shouldAcceptDrop function. See below.
    :lock-axis string undefined Locks the movement axis of the dragging. Possible values are x, y or undefined.
    :drag-handle-selector string undefined Css selector to test for enabling dragging. If not given item can be grabbed from anywhere in its boundaries.
    :non-drag-area-selector string undefined Css selector to prevent dragging. Can be useful when you have form elements or selectable text somewhere inside your draggable item. It has a precedence over dragHandleSelector.
    :drag-begin-delay number 0 (200 for touch devices) Time in milisecond. Delay to start dragging after item is pressed. Moving cursor before the delay more than 5px will cancel dragging.
    :animation-duration number 250 Animation duration in milisecond. To be consistent this animation duration will be applied to both drop and reorder animations.
    :auto-scroll-enabled boolean true First scrollable parent will scroll automatically if dragging item is close to boundaries.
    :drag-class string undefined Class to be added to the ghost item being dragged. The class will be added after it's added to the DOM so any transition in the class will be applied as intended.
    :drop-class string undefined Class to be added to the ghost item just before the drop animation begins.
    @drag-start function undefined See descriptions below
    @drop function undefined See descriptions below
    :get-child-payload function undefined See descriptions below
    :should-animate-drop function undefined See descriptions below
    :should-accept-drop function undefined See descriptions below
    @drag-enter function undefined See descriptions below
    @drag-leave function undefined See descriptions below
    属性 类型 默认 描述
    :方向 vertical 容器的方向。 可以是水平垂直的
    :行为 move 描述天气的属性,拖动项将被移动或复制到目标容器。 可以移动复制
    :团队名字 undefined 可以在具有相同组名的容器之间移动可拖动对象。 如果未设置,则容器将不接受来自外部的拖动。 可以通过shouldAcceptDrop函数覆盖此行为。 见下文。
    :锁轴 undefined 锁定拖动的移动轴。 可能的值为xyundefined
    :拖动句柄选择器 undefined CSS选择器进行测试以启用拖动。 如果没有提供,则可以从其边界内的任何位置抓取物品。
    :非拖动区域选择器 undefined CSS选择器可防止拖动。 当您在可拖动项内的某处具有表单元素或可选文本时,此选项很有用。 它的优先级高于dragHandleSelector
    :拖曳开始延迟 0 (触摸设备为200 ) 时间以毫秒为单位。 按下项目后开始拖动的延迟时间。 在延迟超过5px之前移动光标将取消拖动。
    :动画持续时间 250 动画持续时间(以毫秒为单位)。 为了保持一致,此动画持续时间将同时应用于拖放动画和重新排序动画。
    :启用自动滚动 布尔值 true 如果拖动项靠近边界,则第一个可滚动父级将自动滚动。
    :拖动类 undefined 要添加到要拖动的幻影项的类。 该类将在添加到DOM之后添加,因此该类中的任何过渡都将按预期应用。
    :下降级 undefined 在放下动画开始之前要添加到ghost项目的类。
    @ drag-start 功能 undefined 请参阅下面的说明
    @下降 功能 undefined 请参阅下面的说明
    :get-child-payload 功能 undefined 请参阅下面的说明
    :应该动画放 功能 undefined 请参阅下面的说明
    :应该接受 功能 undefined 请参阅下面的说明
    @ drag-enter 功能 undefined 请参阅下面的说明
    @ drag-leave 功能 undefined 请参阅下面的说明


    拖动开始 (drag-start)

    Event to be emitted only by the container which drag starts from.

    仅由拖动开始的容器发出的事件。

    @drag-start="onDragStart($event)"
    
    onDragStart: function({index, payload}) {
      ...
    }

    参量 (Parameters)

    • event : object

      事件object

      • index : indexnumber : index of the child itemnumber :子项的索引
      • payload : 有效负载object : the payload object that is returned by get-child-payload function. It will be undefined in case get-child-payload is not set.object :由get-child-payload函数返回的有效负载对象。 如果未设置get-child-payload,它将是未定义的。

    下降 (drop)

    The event to be emitted by any relevant container when drop is over. (After drop animation ends). Source container and any container that could accept drop is considered relevant.

    放置结束时,任何相关容器将发出的事件。 (放下动画结束后)。 源容器和任何可以接受降落的容器都被认为是相关的。

    @drop="onDrop($event)"
    
    onDrop: function(dropResult) {
      const { removedIndex, addedIndex, payload, element } = dropResult;
      ...
    }

    参量 (Parameters)

    • dropResult : object

      dropResultobject

      • removedIndex : removeIndexnumber : index of the removed children. Will be number :移除的孩子的索引。 如果未删除任何项目,则为null if no item is removed.null
      • addedIndex : addIndexnumber : index to add droppped item. Will be number :添加删除项目的索引。 如果未添加任何项目,则为null if no item is added.null
      • payload : payloadobject : the payload object retrieved by calling object :通过调用get-child-payload function.get-child-payload函数检索的有效载荷对象。
      • element : elementDOMElement : the DOM element that is movedDOMElement :移动的DOM元素

    获得孩子的有效载荷 (get-child-payload)

    The function to be called to get the payload object to be passed onDrop function.

    要获取要通过onDrop函数传递的有效负载对象的函数。

    :get-child-payload="getChildPayload"
    
    getChildPayload: function(index) {
      return {
        ...
      }
    }

    参量 (Parameters)

    • index : number : index of the child item

      indexnumber :子项的索引

    退货 (Returns)

    • payload : object

      有效负载object

    应该动画掉落 (should-animate-drop)

    The function to be called by the target container to which the dragged item will be droppped. Sometimes dragged item's dimensions are not suitable with the target container and dropping animation can be wierd. So it can be disabled by returning false. If not set drop animations are enabled.

    将被拖放的项目放置到的目标容器所调用的函数。 有时,被拖动项目的尺寸不适合目标容器,并且放下动画可能会很麻烦。 因此可以通过返回false禁用它。 如果未设置,则启用放下动画。

    :should-animate-drop="shouldAnimateDrop"
    
    shouldAnimateDrop: function(sourceContainerOptions, payload) {
      return false;
    }

    参量 (Parameters)

    • sourceContainerOptions : object : options of the source container. (parent container of the dragged item)

      sourceContainerOptionsobject :源容器的选项。 (被拖动项的父容器)

    • payload : object : the payload object retrieved by calling get-child-payload function.

      payloadobject :通过调用get-child-payload函数检索的有效载荷对象。

    退货 (Returns)

    • boolean : true / false

      布尔值对/错

    应该接受 (should-accept-drop)

    The function to be called by all containers before drag starts to determine the containers to which the drop is possible. Setting this function will override the group-name property and only the return value of this function will be taken into account.

    开始拖动之前,所有容器都将调用该函数,以确定可以将其拖放到的容器。 设置此函数将覆盖group-name属性,并且仅考虑该函数的返回值。

    :should-accept-drop="shouldAcceptDrop"
    
    shouldAcceptDrop: function(sourceContainerOptions, payload) {
      return true;
    }

    参量 (Parameters)

    • sourceContainerOptions : object : options of the source container. (parent container of the dragged item)

      sourceContainerOptionsobject :源容器的选项。 (被拖动项的父容器)

    • payload : object : the payload object retrieved by calling get-child-payload function.

      payloadobject :通过调用get-child-payload函数检索的有效载荷对象。

    退货 (Returns)

    • boolean : true / false

      布尔值对/错

    拖动输入 (drag-enter)

    The event to be emitted by the relevant container whenever a dragged item enters its boundaries while dragging.

    每当拖动的项目进入其边界时,相关容器将发出的事件。

    @drag-enter="onDragEnter()"
    
    onDragEnter: function() {
      ...
    }

    拖曳离开 (drag-leave)

    The event to be emitted by the relevant container whenever a dragged item leaves its boundaries while dragging.

    每当拖动的项目离开其边界时,相关容器将发出的事件。

    @drag-leave="onDragLeave()"
    
    onDragLeave: function() {
      ...
    }

    可拖动 (Draggable)

    Wrapper component for Container's children. Every child element should be wrapped with Draggable component.

    容器子项的包装器组件。 每个子元素都应使用Draggable组件包装。

    翻译自: https://vuejsexamples.com/a-fast-and-lightweight-drag-drop-sortable-library-for-vue-js/

    vue.js 拖拽排序

    展开全文
  • 有一点需要注意的是,react.js会给所有的属性事件名称前加上”on”,后面则为驼峰写法。例如原生的click事件,在react.js里应使用onClick事件。 我的组件使用的拖放属性如下: draggable 当设置为true时,当前控件...
  • react拖拽组件调研

    2020-12-15 17:43:24
    不适用于简单的一些元素拖拽,感觉更适合用于大场景下多元素拖拽排序等待 2. React-Grid-Layout 一种对元素进行类似于网格布局后,拖拽修改其transform的拖拽组件 主要有两种: GridLayout: 需要定义宽度 ...
  • 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种互动效果: 手风琴的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条 (sliders)、表格排序(table ...
  • 3.列表支持拖拽式排序,可拖动类表内的程序图标进行任意排序 4.列表项目可转移到其他分组 5.项目支持查看属性、更新图标以及定位目录等 6.添加项目支持拖拽、输入、选择等多种方式,支持带参数运行 7.程序支持所有...
  • 现有一张带有自定义序号的表,因为前端要对齐进行拖拽式或输入式排序,排序后要对整个表的序号重新计算 一张A表 内容如下,SortNum为自定义排序号: ID Name SortNum 1 A 0 2 B 2 3 C ...
  • 所有效果说明:基本的鼠标互动:拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing)各种互动效果:手风琴的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条(sliders)...
  • Zing 是一款通用企业WordPress主题,首页模块可自由开启或关闭,自由排序,响应设计,完美支持 pc 端、手机端和平板等各类设备访问,SEO 优化,多种分类页面样式,在编辑分类的时候可以选择使用哪一个样式,自定义...
  • 模块化设计,显示的模块可在后台自由拖拽排序及隐藏 √ 首页幻灯片: 两种幻灯片模式,1.具有标题/描述文字动画的幻灯片;2.可自由设计图片的幻灯片 √ 详情页模板: 默认文章类模板和案例详情页模板 √ 页面模版: ...
  • 表格的列宽度可进行拖拽式调整 位置更换 表格的列位置进行拖拽式调整 配置列 可通过配置对列进行显示隐藏转换 表头吸顶 在表存在可视区域的情况下,表头将一直存在于顶部 列固定 指定某列固定在左侧或右侧 ...
  • 宽度调整: 表格的列宽度可进行拖拽式调整 位置更换: 表格的列位置进行拖拽式调整 配置列: 可通过配置对列进行显示隐藏转换 表头吸顶: 在表存在可视区域的情况下,表头将一直存在于顶部 排序: 表格单项排序或...
  • 表格插件:GridManager

    千次阅读 2019-06-25 11:24:56
    宽度调整:支持用户对表格的列宽度可进行拖拽式调整 位置调整:支持用户对表格的列位置进行拖拽式调整 可视化调整:支持用户对表格的列进行显示与隐藏切换 排序功能:支持表格单项排序或组合排序 分页功能:表格...
  • GridManager 优势 纯原生javascript实现,不...表格的列宽度可进行拖拽式调整 表格的列位置进行拖拽式调整 可通过配置对列进行显示隐藏转换 在表存在可视区域的情况下,表头将一直存在于顶部 表格单项排序或组合排...
  • 拖拽式调整 3.先排序,后一键写入顺序文件。 国外的开源软件 MP3 播放排序 http://www.murraymoffatt.com/software-problem-0010.htmlMP3 音量调节 http://mp3gain.sourceforge.net/开始做,坚持做,重复做 ...
  • vue开源项目

    2019-05-24 10:27:05
    Vue-js-grid是vue框架的一个拖拽重新排序的插件 Immutable 用于跟进一步的优化vue的性能 当前节点改变时,只改变与其关联的父节点,不影响节点树其他分支的重构。 Vue-element-admin 一个神奇的vue后台管理系统。 ...
  • Android精选源码 Android各种沉浸状态栏实现源码 Android自定义View实现炫酷的...android RecyclerView实现了拖拽排序效果源码 android实现手势交互源码 Android高德地图多路线规划源码 android虚拟摇杆源码...
  • 各种互动效果:手风琴的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条(sliders)、表格排序(table sorters)、页签(tabs)、放大镜效果(magnifier)、阴影效果(shadow) 第一部分:鼠标交互1.1 ...
  • Android精选源码 ...android RecyclerView实现了拖拽排序效果源码 android实现手势交互源码 Android高德地图多路线规划源码 android虚拟摇杆源码 Material Design风格使用Retro...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 143
精华内容 57
关键字:

拖拽式排序