pagetabcontrol拖动_vue拖动滚动条与拖拽冲突 - CSDN
精华内容
参与话题
  • 利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。 webkit浏览器下滚动条可以自定义,其中resize区域大小就是scrollbar的大小,于是,我们可以将整个拉伸区域变成和容器一样...

    利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。

    webkit浏览器下滚动条可以自定义,其中resize区域大小就是scrollbar的大小,于是,我们可以将整个拉伸区域变成和容器一样高。

    实现原理

    CSS中有一个resize属性,如果一个元素的overflow属性值不是visible,则通过设置resize属性可以拉伸这个元素尺寸。

    但是,这种拉伸却有一个问题,那就是拖拽的区域太小了,就右下角那么一丢丢地方:

     

    那有什么办法可以把这个拖拽区域变大呢?

    后来经过我的研究发现,resize属性的拖拽bar和滚动条的拖拽bar是一个体系里面的东西,只需要对滚动条进行自定义,就能间接设置resize bar的尺寸。

    例如:

    .resize-bar::-webkit-scrollbar {
        width: 200px; height: 200px;
    }

    此时,拉伸区域就很大了:

    接下来做的事情就是把这个拖拽区域藏在某一栏布局的后面,然后透出部分宽度可以用来拖拽,如下图所示:

     

    最后,我们的左右分栏采用自适应布局就能实现我们想要的效果。

    您可以狠狠地点击这里:纯CSS实现分栏宽度拉伸demo

     

    代码如下:

     

    .column {
        overflow: hidden;
    }
    .column-left {
        height: 400px;
        background-color: #fff;
        position: relative;
        float: left;
    }
    .column-right {
        height: 400px;
        padding: 16px;
        background-color: #eee;
        box-sizing: border-box;
        overflow: hidden;
    }
    .resize-save {
        position: absolute;
        top: 0; right: 5px; bottom: 0; left: 0;
        padding: 16px;
        overflow-x: hidden;
    }
    .resize-bar {
        width: 200px; height: inherit;
        resize: horizontal;
        cursor: ew-resize; 
        opacity: 0;
        overflow: scroll;
    }
    /* 拖拽线 */
    .resize-line {
        position: absolute;
        right: 0; top: 0; bottom: 0;
        border-right: 2px solid #eee;
        border-left: 1px solid #bbb;
        pointer-events: none;
    }
    .resize-bar:hover ~ .resize-line,
    .resize-bar:active ~ .resize-line {
        border-left: 1px dashed skyblue;
    }
    .resize-bar::-webkit-scrollbar {
        width: 200px; height: inherit;
    }
    
    /* Firefox只有下面一小块区域可以拉伸 */
    @supports (-moz-user-select: none) {
        .resize-bar:hover ~ .resize-line,
        .resize-bar:active ~ .resize-line {
            border-left: 1px solid #bbb;
        }
        .resize-bar:hover ~ .resize-line::after,
        .resize-bar:active ~ .resize-line::after {
            content: '';
            position: absolute;
            width: 16px; height: 16px;
            bottom: 0; right: -8px;
            background: url(./resize.svg);
            background-size: 100% 100%;
        }
    }
    <div class="column">
        <div class="column-left">
            <div class="resize-bar"></div>
            <div class="resize-line"></div>
            <div class="resize-save">
                左侧的内容,左侧的内容,左侧的内容,左侧的内容
            </div>                                            
        </div>
        <div class="column-right">
            右侧的内容,右侧的内容,右侧的内容,右侧的内容
        </div>
    </div>

    利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。

    webkit浏览器下滚动条可以自定义,其中resize区域大小就是scrollbar的大小,于是,我们可以将整个拉伸区域变成和容器一样高。

    展开全文
  • JS 实现控件拖拽/拖动

    千次阅读 2015-12-07 15:55:22
    下面是实现控件拖拽的完整代码,只实现了拖拽,边界控制没做,可以自行添加。 (function ($) {  var move = false; //标记控件是否处于被拖动状态  var dragOffsetX = 0; //控件左边界和鼠标X轴的差  var ...

    下面是实现控件拖拽的完整代码。

    (function ($) {
        var move = false;           //标记控件是否处于被拖动状态
        var dragOffsetX = 0;        //控件左边界和鼠标X轴的差
        var dragOffsetY = 0;        //控件上边界和鼠标Y轴的差
        var dragObj = null;         //用于存储当前对象
    
        $.fn.mydrag = function () {
            dragObj = this;
    
            this.mousedown(function (e) {
                move = true;
    
                //获取鼠标和该控件的位置偏移量,并存入全局变量供后续调用
                dragOffsetX = e.clientX - e.currentTarget.offsetLeft;
                dragOffsetY = e.clientY - e.currentTarget.offsetTop;
            });
    
            $(document).mousemove(function (e) {
                if (move) {
                    //不断获取鼠标新的坐标,并计算出控件的新坐标
                    var newX = e.clientX - dragOffsetX;
                    var newY = e.clientY - dragOffsetY;
    
                    //边界控制,document.documentElement.clientWidth:可见区域宽度  document.documentElement.clientHeight:可见区域高度
                    newX = newX < 0 ? 0 : newX;
                    newY = newY < 0 ? 0 : newY;
                    newX = newX > (document.documentElement.clientWidth - dragObj.outerWidth()) ? (document.documentElement.clientWidth - dragObj.outerWidth()) : newX;
                    newY = newY > (document.documentElement.clientHeight - dragObj.outerHeight()) ? (document.documentElement.clientHeight - dragObj.outerHeight()) : newY;
    
                    //把新的坐标重新赋值给控件
                    dragObj.css({ left: newX + "px", top: newY + "px", position: 'absolute' });
                }
            });
    
            $(document).mouseup(function () {
                if (move) {
                    move = false;
                }
            });
        };
    })(jQuery);

    使用方法:

    1、建一个js文件,将上述代码贴进去。

    2、将该js文件引入页面。

    3、调用方法:$("#id").mydrag();

    或者还可以用下面这个插件替换上面这个插件,用法完全一样,效果有一点点不一样,可以自己体会。

    (function ($) {
        var dragOffsetX = 0;        //控件左边界和鼠标X轴的差
        var dragOffsetY = 0;        //控件上边界和鼠标Y轴的差
    
        $.fn.mydrag = function () {
            this.mousedown(function (e) {
                //获取鼠标和该控件的位置偏移量,并存入全局变量供后续调用
                dragOffsetX = e.clientX - e.currentTarget.offsetLeft;
                dragOffsetY = e.clientY - e.currentTarget.offsetTop;
            });
    
            this[0].ondragend = this[0].ondrag = function (e) {
                //不断获取鼠标新的坐标,并计算出控件的新坐标
                var newX = e.clientX - dragOffsetX;
                var newY = e.clientY - dragOffsetY;
    
                //边界控制,document.documentElement.clientWidth:可见区域宽度  document.documentElement.clientHeight:可见区域高度
                newX = newX < 0 ? 0 : newX;
                newY = newY < 0 ? 0 : newY;
                newX = newX > (document.documentElement.clientWidth - this.width) ? (document.documentElement.clientWidth - this.width) : newX;
                newY = newY > (document.documentElement.clientHeight - this.height) ? (document.documentElement.clientHeight - this.height) : newY;
    
                //把新的坐标重新赋值给控件
                $(this).css({ left: newX + "px", top: newY + "px", position: 'absolute' });
            };
        };
    })(jQuery);



    展开全文
  • Unity 从UI中拖拽对象放置并拖动

    千次阅读 多人点赞 2018-07-31 15:49:33
    需求:点击UI,在场景中生成3D对象,对象跟随鼠标移动,放置后可再次拖拽对象,改变其位置。做了一个小Demo,如下图所示: 实现大致思路: 射线碰撞检测 对象空间坐标变换(世界坐标-&amp;gt;屏幕坐标、屏幕...

    需求:点击UI,在场景中生成3D对象,对象跟随鼠标移动,放置后可再次拖拽对象,改变其位置。做了一个小Demo,如下图所示:

    image

    实现大致思路:

    • 射线碰撞检测
    • 对象空间坐标变换(世界坐标->屏幕坐标、屏幕坐标->世界坐标)

    首先为要生成3D对象的UI添加一个鼠标监听事件,脚本如下:

    SelectImage.cs

    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using UnityEngine.EventSystems;
    public class SelectImage : MonoBehaviour,IPointerDownHandler{
        //需要被实例化的预制
        public GameObject inistatePrefab;
        //实例化后的对象
        private GameObject inistateObj;
    
        // Use this for initialization
        void Start () {
            if (inistatePrefab==null)return;
            //实例化预制
            inistateObj=Instantiate(inistatePrefab) as GameObject;
            inistateObj.SetActive(false);
        }
        //实现鼠标按下的接口
        public void OnPointerDown(PointerEventData eventData)
        {
            inistateObj.SetActive(true);
    
            //将当前需要被实例化的对象传递到管理器中
            SelectObjManager.Instance.AttachNewObject(inistateObj);
        }
    }
    

    将脚本挂载到UI对象上。

    创建一个对象放置管理器,用于处理拖动的放置的逻辑:

    SelectObjManager.cs

    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    
    public class SelectObjManager : MonoBehaviour {
    
        private static SelectObjManager _instance;
        public static SelectObjManager Instance {
            get { return _instance; }
        }
        //物体z轴距摄像机的长度
        public float _zDistance = 50f;
        //对象的缩放系数
        public float _scaleFactor=1.2f;
        //地面层级
        public LayerMask _groundLayerMask;
        int touchID;
        bool isDragging = false;
        bool isTouchInput = false;
        //是否是有效的放置(如果放置在地面上返回True,否则为False)
        bool isPlaceSuccess = false;
        //当前要被放置的对象
        public GameObject currentPlaceObj = null;
        //坐标在Y轴上的偏移量
        public float _YOffset=0.5F;
    
        void Awake () {
            _instance = this;
        }
        void Update () {
            if (currentPlaceObj == null) return;
    
            if (CheckUserInput()){
                MoveCurrentPlaceObj();
            }else if (isDragging){
                CheckIfPlaceSuccess();
            }
        }
        /// <summary>
        ///检测用户当前输入
        /// </summary>
        /// <returns></returns>
        bool CheckUserInput () {
            #if !UNITY_EDITOR&&(UNITY_ANDROID||UNITY_IOS)
            if (Input.touches.Length > 0) {
                if (!isTouchInput) {
                    isTouchInput = true;
                    touchID = Input.touches[0].fingerId;
                    return true;
                } else if (Input.GetTouch (touchID).phase == TouchPhase.Ended) {
                    isTouchInput = false;
                    return false;
                } else {
                    return true;
                }
            }
            return false;
            #else
            return Input.GetMouseButton (0);
            #endif
        }
        /// <summary>
        ///让当前对象跟随鼠标移动
        /// </summary>
        void MoveCurrentPlaceObj () {
            isDragging = true;
            Vector3 point;
            Vector3 screenPosition;
            #if !UNITY_EDITOR&&(UNITY_ANDROID||UNITY_IOS)
            Touch touch = Input.GetTouch (touchID);
            screenPosition = new Vector3 (touch.position.x, touch.position.y, 0);
            #else
            screenPosition = Input.mousePosition;
            #endif
            Ray ray = Camera.main.ScreenPointToRay (screenPosition);
            RaycastHit hitInfo;
            if (Physics.Raycast (ray, out hitInfo, 1000, _groundLayerMask)) {
                point = hitInfo.point;
                isPlaceSuccess = true;
            } else {
                point = ray.GetPoint (_zDistance);
                isPlaceSuccess = false;
            }
            currentPlaceObj.transform.position = point+new Vector3(0,_YOffset,0);
            currentPlaceObj.transform.localEulerAngles = new Vector3 (0, 60, 0);
        }
        /// <summary>
        ///在指定位置化一个对象
        /// </summary>
        void CreatePlaceObj(){
            GameObject obj=Instantiate(currentPlaceObj) as GameObject;
    
            obj.transform.position=currentPlaceObj.transform.position;
            obj.transform.localEulerAngles=currentPlaceObj.transform.localEulerAngles;
            obj.transform.localScale*=_scaleFactor;
            //改变这个对象的Layer为Drag,以便后续拖动检测
            obj.layer=LayerMask.NameToLayer("Drag");
        }
        /// <summary>
        ///检测是否放置成功
        /// </summary>
        void CheckIfPlaceSuccess(){
            if (isPlaceSuccess){
                CreatePlaceObj();
            }
            isDragging=false;
            currentPlaceObj.SetActive(false);
            currentPlaceObj=null;
        }
        /// <summary>
        /// 将要创建的对象传递给当前对象管理器
        /// </summary>
        /// <param name="newObject"></param>
        public void AttachNewObject(GameObject newObject){
            if (currentPlaceObj){
                currentPlaceObj.SetActive(false);
            }
            currentPlaceObj=newObject;
        }
    }

    脚本中都有详细注释,我就不多解释了。

    创建一个脚本,用于处理放置成功后,再次改变位置的逻辑:

    DragObject.cs

    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    
    public class DragObject : MonoBehaviour {
        //只针对指定的层级进行拖动
        public LayerMask _dragLayerMask;
        //指定当前要拖动的对象
        public Transform currentTransform;
        //是否可以拖动当前对象
        public bool isDrag = false;
        //用于存储当前需要拖动的对象在屏幕空间中的坐标
        Vector3 screenPos = Vector3.zero;
        //当前需要拖动对象的坐标相对于鼠标在世界空间坐标中的偏移量
        Vector3 offset = Vector3.zero;
        void Update () {
    
            if (Input.GetMouseButtonDown (0)) {
                //将鼠标输入点转化为一条射线
                Ray ray = Camera.main.ScreenPointToRay (Input.mousePosition);
                RaycastHit hitinfo;
                //如果当前对象与指定的层级发生碰撞,表示当前对象可以被拖动
                if (Physics.Raycast (ray, out hitinfo, 1000f, _dragLayerMask)) {
                    isDrag = true;
                    //将当前需要拖动的对象赋值为射线碰撞到的对象
                    currentTransform = hitinfo.transform;
                    //将当前对象的世界坐标转化为屏幕坐标
                    screenPos = Camera.main.WorldToScreenPoint (currentTransform.position);
                    //将鼠标的屏幕坐标转换为世界空间坐标,再与当前要拖动的对象计算两者的偏移量
                    offset = currentTransform.position - Camera.main.ScreenToWorldPoint (new Vector3 (Input.mousePosition.x, Input.mousePosition.y, screenPos.z));
                } else {
                    isDrag = false;
                }
            }
            if (Input.GetMouseButton (0)) {
                if (isDrag == true) {
    
                    var currentScreenPos = new Vector3 (Input.mousePosition.x, Input.mousePosition.y, screenPos.z);
                    //鼠标的屏幕空间坐标转化为世界坐标,并加上偏移量
                    var currentPos = Camera.main.ScreenToWorldPoint (currentScreenPos) + offset;
                    currentTransform.position = currentPos;
                }
            }
            if (Input.GetMouseButtonUp (0)) {
                isDrag = false;
                currentTransform = null;
            }
        }
    }

    主要是一些坐标空间的变换和计算。

    多余的我就不说了,脚本中都有很详细的注释,Demo地址扫码后当前文章末尾获取。

    更多内容,欢迎关注:

    码码小虫

    展开全文
  • 概述:实现拖拽工作流程配置,可以鼠标左右移动元素,鼠标双击可以删除元素。 基本原理:就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变...
  • element关于table拖拽排序问题

    万次阅读 2020-08-27 14:31:11
    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)
            }
          })
        }
    
    展开全文
  •  鼠标点击控件(自绘控件,可继承任意控件类,下文将给出示例),并且进行拖拽,会有一个半透明黑色阴影来表示当前拖动的位置。当松开鼠标,控件重新绘制在鼠标松开的位置。拖拽功能的实现代码主要在DoEvent函数和...
  • 基于vuedraggable实现拖拽功能

    万次阅读 2020-08-27 14:24:07
    安装 npm i -S vuedraggable 页面引用 import draggable from 'vuedraggable' 简易使用 template <draggable v-model="fileList" @update="fileDragEnd" v-bind="dragOptions">...transition-group tag="ul" ...
  • lz的页面是左右各一个分隔条实现拖拽的,左边是框架自带一个功能没问题,右边是lz模仿做的,结果样子是做出来了,就是左右拖拽的方向反了,向左拖应该是增大,它却缩小,向右应该是缩小,却是增大。 这个问题停了...
  • <template> <el-select ref="dragSelect" v-model="selectVal" v-bind="$attrs" class="drag-select" multiple v-on="$listeners"> <slot /> </el-select>...export def
  • 包含js文件,以及一个html使用该js的实例!
  • HTML5 -canvas拖拽、移动 绘制图片可操作移动,拖动

    万次阅读 热门讨论 2020-01-18 09:53:42
    关于canvas 的基础知识就不多说了,可以进这个网址学习 ... 对于canvas 和 SVG 其实一开始个人是比较倾向于SVG多一点,不过后来工作需要,又学习了下canvas, 这两个之间主要不同是 canvas是在JavaScript中绘制,SVG...
  • draggabilly一款功能强大的拖动拖拽元素插件
  • 在Android开发中,我们常常用到ListView和GridView,而有的时候系统的ListView,GridView并不能满足我们的需求,所以我们需要自己定义一个ListView或者GridView,我的上一篇文章中就是自定义的一个左右滑动删除item的...
  • html5的元素拖拽

    千次阅读 2017-05-07 21:55:13
    html5 元素拖拽
  • <template> <div class="drag"> <div ref="element" class="content" v-drag draggable="false"> <p>文字网页</p> </div> <div style="hei...
  • 拖动的过程中,父布局会出现上下左右四个箭头按钮,当光标移动到箭头上并放下时,拖动的视图会移动到指定的方向上去。 实现思路: 中间的绿色组件,经历了以下几个过程: 1.长按实现视图的拖拽。 2.拖拽移动...
  • <!DOCTYPE html> <html> <head> <title>move</title> </head> <style type="text/css"> .body_css { ...
  • 最近产品要求管理后台需要增加个拖动更换排序的功能 过去都是使用JQuery做的拖动。接触vue后打算找个vue插件体验下,于是乎,有了本篇。未搭建环境简洁引入版&lt;!-- CDNJS :: Vue (https://cdnjs.com/) --&...
  • RecyclerView实现Item可拖拽拖动、删除) 话不多说,先附上效果图: ItemTouchHelper 这是一个RecyclerView的工具,提供了drag & swipe 的功能,可以帮助我们处理RecyclerView中的Item的拖拽和滑动事件。 ...
  • 一、基于鼠标事件的拖拽 原理——onmousedown、onmousemove、onmouseup onmousedown 该事件会在鼠标按键被按下时触发 支持该事件的HTML标签: &amp;lt;a&amp;gt;, &amp;lt;address&amp;gt;, &...
1 2 3 4 5 ... 20
收藏数 393,621
精华内容 157,448
关键字:

pagetabcontrol拖动