精华内容
下载资源
问答
  • element关于table拖拽排序问题

    万次阅读 2019-10-29 20:31:03
    element关于table拖拽排序问题

    博客地址:http://www.globm.top/blog/1/detail/41
    最近在使用element table的时候,经常会遇到排序的问题,如果只是简单的排序的话,element官方已经给出了指定的方法

    //table的默认排序方式是按ID排序 顺序为递减 这里可以改成其它 比如 order
        <el-table :data="tableData" :default-sort="{prop: 'ID', order: 'descending'}">
          //设置sortable属性时出现排序按钮
          <el-table-column prop="ID" label="座号" sortable>
        </el-table>
    

    但是,element官方组件并不支持拖拽排序,我在这里引入sortablejs实现拖拽排序的功能

    • sortablejs GitHub地址
    //sortablejs     GitHub地址
    https://github.com/SortableJS/Sortable#readme
    
    //安装sortable.js
    Install with NPM:
    
    $ npm install sortablejs --save
    
    //在组件内引入
    import Sortable from 'sortablejs'
    
    //为需要拖拽排序的表格添加ref属性
    <el-table  ref="dragTable">
    
    //在数据渲染完毕添加拖拽事件
    created(){
       this.getBanner()
    },
    methods:{
    	async getBanner(val){
              await apiGetBanner().then((res)=>{
                   this.bannerTable = res.data.data;
              })
             this.oldList = this.bannerTable.map(v => v.id);
             this.newList = this.oldList.slice();
             this.$nextTick(() => {
                 this.setSort()  //数据渲染完毕执行方法
             })
        }
        setSort() {
            const el = this.$refs.dragTable.$el.querySelectorAll(
            		'.el-table__body-wrapper > table > tbody'
            )[0];
            this.sortable = Sortable.create(el, {
            	// Class name for the drop placeholder,
            		ghostClass: 'sortable-ghost', 
                    setData: function(dataTransfer) {
                    dataTransfer.setData('Text', '')
                },
               //拖拽结束执行,evt执向拖拽的参数
               onEnd: evt => {
                  //判断是否重新排序
                  if(evt.oldIndex !== evt.newIndex){
                      let data = {
                         id:this.bannerTable[evt.oldIndex].id,
                         banner_order:evt.newIndex
                      }
                      //数据提交失败则恢复旧的排序
                      apiPutBanner(data).catch(()=>{
                         const targetRow = this.bannerTable.splice(evt.oldIndex, 1)[0];
                         this.bannerTable.splice(evt.newIndex, 0, targetRow);
                      })
                  }
                }
            })
        }
    }
    
    

    如果需要列拖拽的话,可以参考下面的代码,和上面是一样的原理,在这里我就不赘述了

    //行拖拽
        rowDrop() {
          const tbody = document.querySelector('.el-table__body-wrapper tbody')
          const _this = this
          Sortable.create(tbody, {
            onEnd({ newIndex, oldIndex }) {
              const currRow = _this.tableData.splice(oldIndex, 1)[0]
              _this.tableData.splice(newIndex, 0, currRow)
            }
          })
        },
        //列拖拽
        columnDrop() {
          const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
          this.sortable = Sortable.create(wrapperTr, {
            animation: 180,
            delay: 0,
            onEnd: evt => {
              const oldItem = this.dropCol[evt.oldIndex]
              this.dropCol.splice(evt.oldIndex, 1)
              this.dropCol.splice(evt.newIndex, 0, oldItem)
            }
          })
        }
    
    展开全文
  • el-dialog 拖拽及居中效果

    万次阅读 2019-11-28 16:39:04
    el-dialog拖拽及改变大小 1.新建directive.js import Vue from 'vue'; // v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag', { bind(el) { //备注:可以改变类名使其它元素也实现拖拽效果 //鼠标...

    博客地址:http://www.globm.top/blog/1/detail/35
    el-dialog拖拽及改变大小

    1.新建directive.js

    import Vue from 'vue';
    

    只能在窗口内拖拽

    // v-dialogDrag: 弹窗拖拽
    Vue.directive('dialogDrag', {
      bind (el) {
        // 备注:可以改变类名使其它元素也实现拖拽效果
        // 鼠标点击拖拽区域
        const dialogHeaderEl = el.querySelector('.el-dialog__header')
        // 被拖拽元素主题
        const dragDom = el.querySelector('.el-dialog')
        dialogHeaderEl.style.cursor = 'move'
    
        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
        const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
    
        dialogHeaderEl.onmousedown = (e) => {
          // 鼠标按下,计算当前元素距离可视区的距离
          const disX = e.clientX - dialogHeaderEl.offsetLeft
          const disY = e.clientY - dialogHeaderEl.offsetTop
    
          const screenWidth = document.body.clientWidth // body当前宽度
          const screenHeight = document.documentElement.clientHeight // 可见区域高度(应为body高度,可某些环境下无法获取)
    
          const dragDomWidth = dragDom.offsetWidth // 对话框宽度
          const dragDomheight = dragDom.offsetHeight // 对话框高度
    
          const minDragDomLeft = dragDom.offsetLeft
          const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
    
          const minDragDomTop = dragDom.offsetTop
          const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight
    
          // 获取到的值带px 正则匹配替换
          let styL, styT
    
          // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
          if (sty.left.includes('%')) {
            // eslint-disable-next-line no-useless-escape
            styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
            // eslint-disable-next-line no-useless-escape
            styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
          } else {
            styL = +sty.left.split('px')[0]
            styT = +sty.top.split('px')[0]
          }
    
          document.onmousemove = function (e) {
            // 通过事件委托,计算移动的距离
            let left = e.clientX - disX
            let top = e.clientY - disY
    
            // 边界处理
            if (-(left) > minDragDomLeft) {
              left = -(minDragDomLeft)
            } else if (left > maxDragDomLeft) {
              left = maxDragDomLeft
            }
    
            if (-(top) > minDragDomTop) {
              top = -(minDragDomTop)
            } else if (top > maxDragDomTop) {
              top = maxDragDomTop
            }
    
            // 移动当前元素
            dragDom.style.transform = 'none'
            dragDom.style.left = `${left + styL}px`
            dragDom.style.top = `${top + styT}px`
    
            // 将此时的位置传出去
            // binding.value({x:e.pageX,y:e.pageY})
          }
    
          document.onmouseup = function () {
            document.onmousemove = null
            document.onmouseup = null
          }
        }
      }
    })
    

    可以移出窗口

    // v-dialogDrag: 弹窗拖拽
    Vue.directive('dialogDrag', {
        bind(el) {
        //备注:可以改变类名使其它元素也实现拖拽效果
        	//鼠标点击拖拽区域
            const dialogHeaderEl = el.querySelector('.el-dialog__header');
            //被拖拽元素主题
            const dragDom = el.querySelector('.el-dialog');
            dialogHeaderEl.style.cursor = 'move';
    
            // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
            const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
    
            dialogHeaderEl.onmousedown = (e) => {
                // 鼠标按下,计算当前元素距离可视区的距离
                const disX = e.clientX - dialogHeaderEl.offsetLeft;
                const disY = e.clientY - dialogHeaderEl.offsetTop;
    
                // 获取到的值带px 正则匹配替换
                let styL, styT;
    
                // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
                if(sty.left.includes('%')) {
                    // eslint-disable-next-line no-useless-escape
                    styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
                    // eslint-disable-next-line no-useless-escape
                    styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
                }else {
                    styL = +sty.left.split('px')[0];
                    styT = +sty.top.split('px')[0];
                }
    
                document.onmousemove = function (e) {
                    // 通过事件委托,计算移动的距离
                    const l = e.clientX - disX;
                    const t = e.clientY - disY;
    
                    // 移动当前元素
                    dragDom.style.left = `${l + styL}px`;
                    dragDom.style.top = `${t + styT}px`;
    
                    //将此时的位置传出去
                    //binding.value({x:e.pageX,y:e.pageY})
                };
    
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            }
        }
    })
    

    弹窗宽度拖大 拖小

    // v-dialogDragWidth: 弹窗宽度拖大 拖小
    Vue.directive('dialogDragWidth', {
        bind(el, binding) {
            const dragDom = binding.value.$el.querySelector('.el-dialog');
    
            el.onmousedown = (e) => {
    
                // 鼠标按下,计算当前元素距离可视区的距离
                const disX = e.clientX - el.offsetLeft;
    
                document.onmousemove = function (e) {
                    e.preventDefault(); // 移动时禁用默认事件
    
                    // 通过事件委托,计算移动的距离
                    const l = e.clientX - disX;
                    dragDom.style.width = `${l}px`;
                };
    
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            }
        }
    })
    
    

    2.在main.js中引入directive.js
    3.在el-dialog标签的开始位置加入v-dialogDrag或 v-dialogDragWidth就可以实现相应的效果

    el-dialog居中显示效果

    // 推荐直接使用js实现
    this.$nextTick(_ => {
      this.$refs.dialog.style.marginTop
       = `calc((100vh${this.$refs.dialog.clientHeight}px) / 2)`
    })
    
    //配合dialog自带属性实现效果,不建议使用,固定定位元素受动画影响
    .el-dialog{
        transform: translateY(-50%);
        margin-top: 0!important;
        top: 50%;
    }
    
    //使用弹性布局,兼容性较差
    .el-dialog{
        display: flex;
        flex-direction: column;
        margin:0 !important;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        /*height:600px;*/
        max-height:calc(100% - 30px);
        max-width:calc(100% - 30px);
    }
    .el-dialog .el-dialog__body{
        flex:1;
        overflow: auto;
    }
    
    展开全文
  • Android 可拖拽的GridView效果实现, 长按可拖拽和item实时交换,项目详情http://blog.csdn.net/xiaanming/article/details/17718579
  • 功能:Wpf的拖拽功能很好使,但是伴随拖拽的图标确实系统级别的,不能更改,就几个很傻的很小的东西,这个例子就是改这个图标的,比如,你拖拽一个文件夹,这时候跟着鼠标走的不是 一个虚线的小东西,而是一个文件夹...
  • h5拖拽和vue拖拽

    2020-06-23 17:48:23
    h5拖拽 先介绍一个h5拖拽,他属于h5新特性,api简单,方便好用,附上文章地址HTML 5 拖放。 这里是代码: <div @dragover.prevent='over' @drop.prevent='drop'> <div v-for="(item, i) in left.list" :...

    h5拖拽

    先介绍一个h5拖拽,他属于h5新特性,api简单,方便好用,附上文章地址HTML 5 拖放
    这里是代码:

                  <div  @dragover.prevent='over' @drop.prevent='drop'>
                    <div v-for="(item, i) in left.list" :key="i" draggable @dragstart='start' v-text='item.name'></div>
                  </div>
    

    over是拖拽过程中的方法,start是开始拖拽的时候 获取到拖拽数据,比如:

     start (ev) {
            // 获取被拖拽的元素
            this.dom = ev
          },
    

    drop 是我拖拽完成后的操作,这里是取到拖拽的名字赋值。

           drop (ev, i) {
            // 把被拖拽的元素追加到容器中去
            this.conditionList[i].FormulaCondition = ev.target.value + `[${this.dom.target.innerText}]`
          },
    

    vue 拖拽方法

    下面介绍一下vue拖拽的实现方法:
    先开始找了一个 vue-slicksort 的插件,但是好用是好用,但是不符合需求,api也不丰富,又找到了 Vue.Draggable ,这个插件api相对来说很丰富,功能挺全,用的人也多。
    html:

    <draggable
     	 class="dragArea list-group"
         :list="list"
         :group="{ name: 'people', pull: pullFunction }"
         :fallback-tolerance="1"
         :force-fallback="true"
         @start="start"
         @end="end"
       >
        <div :class="{ 'bgStyle' : element.style }" class="list-group-item" @click="leftDraggableClick(element, i)" v-for="(element ,i) in list" :key="element.id">
          {{element.RuleName}}
        </div>
    </draggable>
    

    这个是拖拽写法,重点讲一下
    :fallback-tolerance=“1”
    :force-fallback=“true”

    这两个参数用法,上面介绍的拖拽方法在拖拽过程中都无法滚动鼠标滚轮,只能把拖拽的div放在浏览器上下边缘地方才可以滑动屏幕,很不方便,在 Vue.Draggable 这个插件中,给组件加上这两个参数就可以完美解决问题!撒花,完结。

    展开全文
  • 目录 安装依赖 vuedraggable 实现拖拽的要点 行拖拽要点 列拖拽要点 完整范例代码 ...安装vuedraggable 的同时,会...使用class为draggable 的div 包裹整个表格,以便拖拽代码中,准确抓取到拖拽元素的父容器 ...

    目录

    安装依赖 vuedraggable

    实现拖拽的要点

    行拖拽要点

    列拖拽要点

    完整范例代码

    安装依赖 vuedraggable

    安装  vuedraggable 的同时,会自动安装 sortablejs

    npm i -S vuedraggable

    或直接安装  sortablejs

    npm install sortablejs --save

    更多配置参考—— vue.draggable中文文档
    http://www.itxst.com/vue-draggable/tutorial.html  

    实现拖拽的要点

     使用class为 draggable 的div 包裹整个表格,以便拖拽代码中,准确抓取到拖拽元素的父容器

    行拖拽要点

     需在 el-table 标签中,根据行的内容指定行的唯一标识  row-key="id"

    列拖拽要点

    需额外定义两个数组,分别存储拖拽前的列顺序和拖拽后的列顺序

    完整范例代码

    <template>
        <div class="draggable" style="padding: 20px">
            <el-table
                    row-key="id"
                    :data="tableData"
                    style="width: 100%"
                    border
            >
                <el-table-column
                        v-for="(item,index) in oldList"
                        :key="`col_${index}`"
                        :prop="newList[index].prop"
                        :label="item.label"
                        align="center"
                >
                </el-table-column>
            </el-table>
        </div>
    </template>
    <script>
        import Sortable from 'sortablejs';
    
        export default {
            mounted() {
                this.oldList = JSON.parse(JSON.stringify(this.tableConfig.tableItems))
                this.newList = JSON.parse(JSON.stringify(this.tableConfig.tableItems))
                this.columnDrop()
                this.rowDrop()
            },
            data() {
                return {
                    oldList: [],
                    newList: [],
                    tableData: [
                        {
                            id:1,
                            name:'李一',
                            gender:'男',
                            age:30,
                            job:"会计"
                        },
                        {
                            id:2,
                            name:'王二',
                            gender:'未知',
                            age:18,
                            job:"无业游民"
                        },
                        {
                            id:3,
                            name:'张三',
                            gender:'男',
                            age:50,
                            job:"老板"
                        },
                    ],
                    tableConfig: {
                        tableItems: [
                            {
                                label: '姓名',
                                prop: 'name',
                            },
                            {
                                label: '性别',
                                prop: 'gender',
                            },
                            {
                                label: '年龄',
                                prop: 'age',
                            },
                            {
                                label: '工作',
                                prop: 'job',
                            },
                        ]
                    }
                }
            },
            methods: {
                // 行拖拽
                rowDrop() {
                    // 此时找到的元素是要拖拽元素的父容器
                    const tbody = document.querySelector('.draggable .el-table__body-wrapper tbody');
                    const _this = this;
                    Sortable.create(tbody, {
                        //  指定父元素下可被拖拽的子元素
                        draggable: ".draggable .el-table__row",
                        onEnd({newIndex, oldIndex}) {
                            const currRow = _this.tableData.splice(oldIndex, 1)[0];
                            _this.tableData.splice(newIndex, 0, currRow);
                        }
                    });
                },
                // 列拖拽
                columnDrop() {
                    const wrapperTr = document.querySelector('.draggable .el-table__header-wrapper tr');
                    this.sortable = Sortable.create(wrapperTr, {
                        animation: 180,
                        delay: 0,
                        onEnd: evt => {
                            const oldItem = this.newList[evt.oldIndex];
                            this.newList.splice(evt.oldIndex, 1);
                            this.newList.splice(evt.newIndex, 0, oldItem);
                        }
                    });
                }
            }
        }
    </script>
    <style scoped>
    </style>

     

    展开全文
  • ScrollRect拖拽事件和子物体的拖拽事件有冲突的解决办法。 工作中遇到ScrollView的拖拽事件和其子物体下的拖拽事件有冲突,拖拽子物体时左右移动,ScrollView也会动,查CSDN遇到的都是ScrollView的子物体点击事件被...
  • import drag from './drag' const install = function(Vue) { Vue.directive('el-drag-dialog', drag) } if (window.Vue) { window['el-drag-dialog'] = drag Vue.use(install); // eslint-disable-line ...
  • 拖拽的整体主要代码 ——拖拽完整代码 拖拽的整体主要代码 ​ 实现本次拖拽的效果的主要代码如下 import React,{useRef,useEffect,useState} from 'react' import './index.scss' const prefixCls = 'drag' ...
  • 一、基于鼠标事件的拖拽 原理——onmousedown、onmousemove、onmouseup onmousedown 该事件会在鼠标按键被按下时触发 支持该事件的HTML标签: &amp;lt;a&amp;gt;, &amp;lt;address&amp;gt;, &...
  • 简介:看板视图,支持整列拖拽、单个 Item 拖拽、跨列拖拽、放大缩小等 更多:作者 提 Bug  标签:   看板视图,支持整列拖拽、单个 Item 拖拽、跨列拖拽、放大缩小等 看一下效果图,gif 录制的不是特别好...
  • 基于vuedraggable实现拖拽功能

    万次阅读 2019-12-03 19:08:52
    filter: ".ignore-elements", // 不导致拖拽的选择器(字符串或函数) preventOnFilter: true, // 调用“event.preventDefault()”时触发“filter” draggable: ".item", // 指定元素中的哪些项应该是可拖动的。...
  • wpf 拖拽大全

    热门讨论 2012-06-12 10:35:22
    wpf 拖拽 ListView拖拽 图形拖拽 Tab拖拽 Button拖拽 文本 拖拽
  • QListWidget拖拽复制,拖拽移动到另外一个控件QlistWidget可拖动属性设置二级目录三级目录 QlistWidget可拖动属性设置 如图: 红圈代表的是 是否展示拖拽项 篮圈代表的是 是否支持拖动自己的项 绿圈代表的是 拖拽的...
  • 专栏文章支持拖拽排序 是的,没错!大家心心念的专栏自定义排序功能来了!具体操作如下: 点击管理文章: 直接拖拽文章即可! 博客周排行榜上线 国庆黄金周来临之前,CSDN博客团队上线了新的排行榜,...
  • datatables 拖拽

    千次阅读 2019-04-04 11:41:58
    需求是让table可以显示隐藏,以及拖拽, 并且下次登录的时候能回到上次隐藏以及拖拽的顺序,之前用jquery写了显示隐藏,以及拖拽,效果不太理想,在网上查了一下,发现datables有这两个功能,直接保存到cookie,...
  • div拖拽

    千次阅读 2019-06-10 07:44:12
    div拖拽 …………………………………………………………………………………………………………… 开发工具与关键技术:Adobe Dreamweaver CC 2017 作者:林敏静 撰写时间:2019年6月2日 ………………………………...
  • MFC拖拽

    千次阅读 2018-07-19 22:44:12
    在日常的程序中,为了操作的方便,经常需要使用鼠标拖拽的方式把文件管理器中的文件拖拽到我们自己写的程序中,以下就简单介绍以下实现该操作的方法。  其实文件管理器的拖拽方式实现起来很简单,主要通过几个函数...
  • 表格拖拽排序:组件地址:https://reactabular.js.org/#/drag-and-drop 拖动的排序是用React-DnD:React-DnD:http://react-dnd.github.io/react-dnd/ Tree树形空间的拖动控件:Ant Design:...
  • 拖拽物体

    千次阅读 2020-01-16 17:31:21
    一:UI元素 ——使用UI事件接口 using UnityEngine; using UnityEngine.EventSystems; using UnityEngine.UI; public class Test : MonoBehaviour,IDragHandler ...//当前拖拽的物体 public v...
  • electron拖拽

    千次阅读 2018-08-30 16:32:51
    在electron中做拖拽很容易直接给样式就好了 -webkit-app-region: drag; //可以拖拽 -webkit-app-region: no-drag; //不可以拖拽   注意:如果元素给了-webkit-app-region: drag;那么就无法触发点击事件了 -...
  • 拖拽原理

    2016-12-02 20:01:00
    拖拽原理 1.鼠标按下+鼠标移动 = 拖拽 事件 onmousedown + onmousemove 2.鼠标松开 = 无拖拽 停止拖拽 onmouseup 3.鼠标偏移 = 拖拽距离
  • Unity_拖拽|全方位拖拽物体攻略 转载https://www.jianshu.com/p/0a28e9de0f64 Unity中UGUI控件和3D物体拖拽实现 基本原理 Unity拖拽的基本原理:射线检测,鼠标位置增量转换为统一空间的位置增量,将位置增量...
  • 拖拽图形

    千次阅读 2017-01-17 14:35:21
    原理:Visual C++空间图形可视化算法原理与实践图形拖拽思路拖拽常用于在图形的定位和组合是需要交互式移动的情况。其思路就是确定图形的新旧定位点,以此来绘制拖拽路径(类似于橡皮筋的实现),鼠标移动过程中不断...
  • 1、设置属性OptionsBehavior ...BeforeDragNode()(拖拽前判断选中的节点是否可被拖拽); DragDrop()(拖拽时判断是否可以拖拽到目标节点的子节点或兄弟节点); AfterFocusNode()(拖拽成功...
  • 拖拽功能的实现 拖拽范围限制的实现 将拖拽范围限制在屏幕内 将UI限制在另一个UI内(不受pivot影响) 效果演示 UI简单拖拽拖拽范围限制在屏幕内 将拖拽范围限制在其他UI内 拖拽功能的实现 我们只需要...
  • 移动端拖拽的实现效果

    千次阅读 2016-07-21 23:17:09
    拖拽
  • QListView实现自定义拖拽拖拽即选中),让你摆脱传统难看的拖拽样式!含效果图。
  • js 禁止拖拽

    2020-09-05 02:38:18
    当pc需要拖拽的时候,拖拽图片会打开一个新窗口,这时候需要禁止拖拽 // 禁止拖拽 window.ondragstart = function () { return false; }
  • QListWidget实现自定义拖拽拖拽即选中),让你摆脱传统难看的拖拽样式!含效果图。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 54,556
精华内容 21,822
关键字:

拖拽