vue中三种方式实现元素鼠标拖动效果代码

vue中二种方式实现元素鼠标拖动效果代码

鼠标拖动的原理就是实时计算鼠标移动的相对位置,改变元素对象的位置,那么浏览器窗体的一些属性我们先了解下

clientY 指的是距离可视页面左上角的距离

pageY 指的是距离可视页面左上角的距离(不受页面滚动影响)

screenY 指的是距离屏幕左上角的距离

layerY 指的是找到它或它父级元素中最近具有定位的左上角距离

offsetY 指的是距离它自己左上角的距离

一张图带大家简单了解了解

vue中二种方式实现元素鼠标拖动效果代码

vue中二种方式实现元素鼠标拖动效果代码

拖动效果如上,我们来通过二种方式实现拖动效果

一、vue自定义指令directive方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script>

    <style>
    </style>
</head>
<body>
    <div id="box">
        位置
        <br>x:{{val.x}} <br>y:{{val.y}}
        <div v-drag="greet" id="drag" :style="style">
            注意这里要通过指令绑定函数将当前元素的位置数据传出来
        </div>
    </div>
        <script type="text/javascript">
      
            Vue.directive('drag', //自定义指令

                {
                    bind: function (el, binding) {
                        let oDiv = el; //当前元素
                        let self = this; //上下文
                        oDiv.onmousedown = function (e) {
                            //鼠标按下,计算当前元素距离可视区的距离
                            let disX = e.clientX - oDiv.offsetLeft;
                            let disY = e.clientY - oDiv.offsetTop;

                            document.onmousemove = function (e) {
                                //通过事件委托,计算移动的距离
                                let l = e.clientX - disX;
                                let t = e.clientY - disY;
                                //移动当前元素
                                oDiv.style.left = l + 'px';
                                oDiv.style.top = t + 'px';
                                //将此时的位置传出去
                                binding.value({
                                    x: e.pageX, y: e.pageY
                                })
                            };
                            document.onmouseup = function (e) {

                                document.onmousemove = null;
                                document.onmouseup = null;
                            };
                        };
                    }
                }
            );
            window.onload = function () {
                let vm = new Vue({
                    el: '#box',
                    data: {
                        val: '123',
                        style: {
                            width: '100px',
                            height: '100px',
                            background: 'aqua',
                            position: 'absolute',
                            right: '30px',
                            top: 0
                        }
                    },
                    methods: {
                        //接受传来的位置数据,并将数据绑定给data下的val
                        greet(val) {
                            vm.val = val;
                        }
                    },
                });
            }

     
    </script>
</body>
</html>

二、计算鼠标偏移量

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script>
    <style>
        #app {
            position: relative;
            /*定位*/
            top: 10px;
            left: 10px;
            width: 200px;
            height: 200px;
            background: #666;
            /*设置一下背景*/
        }
    </style>
</head>
<body>


    <div id="app" @mousedown="move">
        <!--绑定按下事件-->
        {{positionX}}
        {{positionY}}
    </div>

    <script type="text/javascript">

        //main.js
        let app = new Vue({
            el: '#app',
            data: {
                positionX: 0,
                positionY: 0,
            },
            methods: {
                move(e) {
                    let odiv = e.target; //获取目标元素

                    //算出鼠标相对元素的位置
                    let disX = e.clientX - odiv.offsetLeft;
                    let disY = e.clientY - odiv.offsetTop;
                    document.onmousemove = (e)=> {
                        //鼠标按下并移动的事件
                        //用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
                        let left = e.clientX - disX;
                        let top = e.clientY - disY;

                        //绑定元素位置到positionX和positionY上面
                        this.positionX = top;
                        this.positionY = left;

                        //移动当前元素
                        odiv.style.left = left + 'px';
                        odiv.style.top = top + 'px';
                    };
                    document.onmouseup = (e) => {
                        document.onmousemove = null;
                        document.onmouseup = null;
                    };
                }

            },
            computed: {},
        });

    </script>
</body>
</html>

三、vue draggable插件

好了,两种方式都说完了,在实际开发中,我们可能使用vue的拖动插件dragable来编写,示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Sortable-1-8-4.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vuedraggable.umd.min.js"></script>
    <style>

        .item {
            cursor: pointer;
            height: 24px;
            line-height: 24px;
            border:1px solid white;
            padding: 10px;
            user-select: none;
            color:white;
        }
        .areaa{
            background:red;
            height:200px;
        }
         .areab{
             height:200px;
            background:green;
            
        }
    </style>

</head>
<body>
    <div id="app">
        <draggable v-model="data" class="areaa" group="people" @start="drag=true" @end="drag=false">
            <div v-for="element in data" class="item" :key="element.id">
                {{element.name}}
            </div>
        </draggable>
        <button @click="checkresult">查看排序后结果</button>
          <draggable v-model="choosenode" class="areab" group="people" @start="drag=true" @end="drag=false">
            <div v-for="element in choosenode" class="item" :key="element.id">
                {{element.name}}
            </div>
        </draggable>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                choosenode:[],
                drag:false,
                data: [{
                    "id": 1, "name": "bfw社区"
                }, {
                    "id": 2, "name": "bfw博客"
                },{
                    "id": 3, "name": "bfw课堂"
                },{
                    "id": 4, "name": "bfw代码"
                }],

            },
              methods: {
                  checkresult(){
                      console.log(this.data);
                  }
              }


        })
    </script>
</body>
</html>

说到这,我们来数数draggable的属性和事件把

属性
group: string or array 分组用的,同一组的不同list可以相互拖动
sort: boolean 定义是否可以拖拽
delay:number 定义鼠标选中列表单元可以开始拖动的延迟时间
touchStartThreshold:number (不清楚)
disabled: boolean 定义是否此sortable对象是否可用,为true时sortable对象不能拖放排序等功能
store:
animation: umber 单位:ms 动画时间
handle: selector 格式为简单css选择器的字符串,使列表单元中符合选择器的元素成为拖动的手柄,只有按住拖动手柄才能使列表单元进行拖动
filter: selector 格式为简单css选择器的字符串,定义哪些列表单元不能进行拖放,可设置为多个选择器,中间用“,”分隔
preventOnFilter: 当拖动filter时是否触发event.preventDefault()默认触发
draggable: selector 格式为简单css选择器的字符串,定义哪些列表单元可以进行拖放
ghostClass: selector 格式为简单css选择器的字符串,当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况,此配置项就是来给这个影子单元添加一个class,我们可以通过这种方式来给影子元素进行编辑样式
chosenClass: selector 格式为简单css选择器的字符串,目标被选中时添加
dragClass:selector 格式为简单css选择器的字符串,目标拖动过程中添加
forceFallback: boolean 如果设置为true时,将不使用原生的html5的拖放,可以修改一些拖放中元素的样式等
fallbackClass: string 当forceFallback设置为true时,拖放过程中鼠标附着单元的样式
dataIdAttr: data-id
scroll:boolean当排序的容器是个可滚动的区域,拖放可以引起区域滚动
scrollFn:function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { … } 用于自定义滚动条的适配
scrollSensitivity: number 就是鼠标靠近边缘多远开始滚动默认30
scrollSpeed: number 滚动速度

事件

setData: 设置值时的回调函数
onChoose: 选择单元时的回调函数
onStart: 开始拖动时的回调函数
onEnd: 拖动结束时的回调函数
onAdd: 添加单元时的回调函数
onUpdate: 排序发生变化时的回调函数
onRemove: 单元被移动到另一个列表时的回调函数
onFilter: 尝试选择一个被filter过滤的单元的回调函数
onMove: 移动单元时的回调函数
onClone: clone时的回调函数
以上函数对象的属性:
to: 移动到的列表的容器
from:来源列表容器
item: 被移动的单元
clone: 副本的单元
oldIndex:移动前的序号
newIndex:移动后的序号

{{collectdata}}

网友评论0