精华内容
下载资源
问答
  • 本文实例为大家共享了vue实现移动端拖动排序的详细代码,供大家参考,详细内容如下效果代码:class="childDiv"v-for="(option,index)inoptions":key="index">{{option}}exportdefault{name:"touchMove",data(){...

    本文实例为大家共享了vue实现移动端拖动排序的详细代码,供大家参考,详细内容如下

    效果

    4e23c5dbb418ae35eeb4fa5e01c0ef0d.gif

    代码:

    class="childDiv"

    v-for="(option,index) in options"

    :key="index"

    >

    {{option}}

    export default {

    name: "touchMove",

    data() {

    return {

    options: ['选项1', '选项2', '选项3', '选项4'],

    columns: undefined,

    flags: false,

    position: {x: 0, y: 0},

    nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '',

    }

    },

    mounted() {

    this.columns = document.querySelectorAll('#child');

    let num = 0;

    for (let i of this.columns) {

    i.style.top = (i.offsetHeight * num) + 'px';

    i.addEventListener('touchstart', this.down);

    i.addEventListener('touchmove', this.move);

    i.addEventListener('touchend', this.end);

    num ++;

    }

    },

    methods: {

    down(e) {

    e.preventDefault();

    this.flags = true;

    var touch;

    if (e.touches) {

    touch = e.touches[0];

    } else {

    touch = e;

    }

    /*touch.clientX clientY 鼠标点击的位置与视图窗口的距离

    * e.target.offsetLeft offsetTop 鼠标点击的div与父元

    * 素的边框距离,父元素必须为定位风格,不然认为父元素为body

    * */

    this.position.x = touch.clientX;

    this.position.y = touch.clientY;

    this.dx = e.target.offsetLeft;

    this.dy = e.target.offsetTop;

    },

    move(e) {

    if (this.flags) {

    var touch;

    if (e.touches) {

    touch = e.touches[0];

    } else {

    touch = e;

    }

    this.nx = touch.clientX - this.position.x;

    this.ny = touch.clientY - this.position.y;//移动的距离

    this.xPum = this.dx + this.nx;

    this.yPum = this.dy + this.ny;

    e.target.style.left = this.xPum + 'px';

    e.target.style.top = this.yPum + 'px';

    }

    },

    end(e) {

    //处理边界问题

    let right= e.target.offsetLeft + e.target.offsetWidth;

    let bottom = e.target.offsetTop + e.target.offsetHeight;

    if(e.target.offsetLeft <= 0 || right >= e.target.offsetParent.offsetWidth){

    e.target.style.left = 0 + 'px';

    }

    if(e.target.offsetTop <= 0 || bottom >= e.target.offsetParent.offsetHeight){

    e.target.style.top = 0 + 'px';

    }

    this.dataTransfer(e);

    this.flags = false;

    },

    dataTransfer(e){

    let eleTop = e.target.offsetTop + Math.round(e.target.offsetHeight / 2);//找到当前元素的中间位置

    let arr = Array.from(this.columns);//将nodelist转为array

    let index = arr.indexOf(e.target);//找到当前元素下标

    for(let i in arr){

    //如果当前元素进入另一个元素的位置,将他们的值互换,位置还原

    if(eleTop > arr[i].offsetTop && eleTop 

    //值互换,位置还原(确保数组的序列数据不变)

    let temp = arr[index].innerText;

    arr[index].innerText = arr[i].innerText;

    arr[i].innerText = temp;

    }

    }

    let num = 0;

    for (let i of this.columns) {

    i.style.top = (i.offsetHeight * num) + 'px';

    num ++;

    }

    }

    }

    }

    .mainDiv {

    position: absolute;

    height: 500px;

    width: 100%;

    border: 3px solid red;

    border-radius: 10px;

    margin: 10px;

    }

    .mainDiv > .childDiv {

    position: absolute;

    height: 50px;

    width: 90%;

    background-color: blue;

    border: 2px solid;

    border-radius: 10px;

    margin: 1px auto;

    padding: 10px;

    text-align: center;

    }

    .test {

    position: relative;

    height: 50px;

    width: auto;

    background-color: red;

    border: 2px solid;

    border-radius: 3px;

    margin: 1px 0 1px;

    padding: 10px;

    text-align: center;

    }

    以上就是本文的全部内容,希望对大家的学习有所帮助

    展开全文
  • 移动端拖拽

    2018-09-30 16:26:53
    ... 移动端拖拽 &lt;script type="text/javascript"&gt; var isdrag = true; var tempX, x, tempY, y; function dragStart(e) { isdrag = true; temp...
    <script type="text/javascript">
        var isdrag = true;
        var tempX, x, tempY, y;
    
        function dragStart(e) {
            isdrag = true;
            tempX = parseInt($("#testDrag").css("left") + 0);
            tempY = parseInt($("#testDrag").css("top") + 0);
            x = e.touches[0].pageX;
            y = e.touches[0].pageY;
        }
    
        function dragMove(e) {
            if (isdrag) {
                var curX = tempX + e.touches[0].pageX - x;
                var curY = tempY + e.touches[0].pageY - y;
                //边界判断
                curX = curX < $(".drag_box").offset().left? $(".drag_box").offset().left : curX;
                curY = curY < $(".drag_box").offset().top ? $(".drag_box").offset().top : curY;
                curX = curX <$(".drag_box").innerWidth()+$(".drag_box").offset().left -$(".test_drag").outerWidth()+1? curX : $(".drag_box").innerWidth()+$(".drag_box").offset().left - $(".test_drag").outerWidth()+1;
                curY = curY < $(".drag_box").innerHeight()+$(".drag_box").offset().top- $(".test_drag").outerHeight()+1? curY : $(".drag_box").innerHeight()+$(".drag_box").offset().top - $(".test_drag").outerHeight()+1;
                $("#testDrag").css({
                    "left": curX,
                    "top": curY
                });
                //禁止浏览器默认事件
                e.preventDefault();
            }
        }
    
        function dragEnd() {
            isdrag = false;
        }
    
        $(function() {
            document.getElementById("testDrag").addEventListener("touchstart", dragStart);
            document.getElementById("testDrag").addEventListener("touchmove", dragMove);
            document.getElementById("testDrag").addEventListener("touchend", dragEnd);
        });
    </script>
    
    展开全文
  • JS移动端拖拽touch

    2018-10-24 14:21:45
    JS移动端拖拽touch拖拽到制定区域改变动画事件
  • 移动端拖拽js网页特效
  • body {height: 2000px;}#block {width: 200px;height: 200px;background-color: red;position: absolute;left: 0;top: 0;}touchstart,touchmove, touchend,touchcancel// 获取节点var block = document....

    body {

    height: 2000px;

    }

    #block {

    width: 200px;

    height: 200px;

    background-color: red;

    position: absolute;

    left: 0;

    top: 0;

    }

    touchstart,touchmove, touchend,touchcancel

    // 获取节点

    var block = document.getElementById("block");

    var oW, oH;

    // 绑定touchstart事件

    block.addEventListener("touchstart", function(e) {

    console.log(e);

    var touches = e.touches[0];

    oW = touches.clientX - block.offsetLeft;

    oH = touches.clientY - block.offsetTop;

    //阻止页面的滑动默认事件

    document.addEventListener("touchmove", defaultEvent, false);

    }, false)

    block.addEventListener("touchmove", function(e) {

    var touches = e.touches[0];

    var oLeft = touches.clientX - oW;

    var oTop = touches.clientY - oH;

    if(oLeft < 0) {

    oLeft = 0;

    } else if(oLeft > document.documentElement.clientWidth - block.offsetWidth) {

    oLeft = (document.documentElement.clientWidth - block.offsetWidth);

    }

    block.style.left = oLeft + "px";

    block.style.top = oTop + "px";

    }, false);

    block.addEventListener("touchend", function() {

    document.removeEventListener("touchmove", defaultEvent, false);

    }, false);

    function defaultEvent(e) {

    e.preventDefault();

    }

    一键复制

    编辑

    Web IDE

    原始数据

    按行查看

    历史

    展开全文
  • 主要为大家详细介绍了Vue实现移动端拖拽交换位置,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 移动端拖拽排序,添加,删除效果
  • touchMove 移动端拖拽滚动效果 可以设置横向滚动和垂直滚动
  • jQuery移动端拖拽式补缺验证码插件
  • React移动端拖拽

    2021-08-31 18:49:53
    React移动端拖拽 代码部分: <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport...

    代码部分:

    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
        <meta charset="UTF-8">
    
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <title>Document</title>
    
    </head>
    
    <style>
    
        .box{
    
            width:150px;
    
            height: 150px;
    
            background-color: gold;
    
            position: absolute;
    
            top: 0;
    
            left: 0;
    
        }
    
    </style>
    
    <body>
    
        <div id="root"></div>
    
    </body>
    
    <script src="./js/browser.js"></script>
    
    <script src="./js/react.js"></script>
    
    <script src="./js/react-dom.js"></script>
    
    <script type="text/babel">
    
        const root=document.querySelector("#root")
    
        class Drag extends React.Component{
    
            constructor(...args){
    
                super(...args)
    
                this.state={
    
                    x:0,
    
                    y:0
    
                }
    
            }
    
            FnStart(ev){
    
                this.pageX=ev.changedTouches[0].pageX-ev.target.offsetLeft;
    
                this.pageY=ev.changedTouches[0].pageY-ev.target.offsetTop;
    
                document.ontouchmove=this.FnMove.bind(this);
    
                document.ontouchend=this.FnEnd.bind(this);
    
            }
    
            FnMove(ev){
    
                    this.X=ev.changedTouches[0].pageX-this.pageX;
    
                    this.Y=ev.changedTouches[0].pageY-this.pageY;
    
                    this.setState({
    
                        x:this.X,
    
                        y:this.Y
    
                    })
    
            }
    
            FnEnd(){
    
                document.ontouchmove=null;
    
                document.ontouchend=null;
    
            }
    
            render(){
    
                return(<div>
    
                    <div style={{left:this.state.x+"px",top:this.state.y+"px"}} className={"box"} onTouchStart={this.FnStart.bind(this)}></div>
    
                    </div>) 
    
            }
    
        }
    
        ReactDOM.render(<Drag/>,root)
    
    </script>
    
    </html>

    展开全文
  • 移动端拖拽、旋转、放大、缩小图片效果
  • 移动端拖动元素

    2020-06-04 23:09:41
    移动端拖动元素 touchstart、touchmove、touchend可以实现拖动元素; 拖动元素需要当前手指的坐标值 可以使用targetTouches[0]里面的pageX和pageY; 移动端拖动的原理:手指移动中,计算出手指移动的距离。然后用...
  • 主要为大家详细介绍了vue实现移动端拖动排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了jQuery 移动端拖拽(模块化开发,触摸事件,webpack)的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
  • var drag = {bindDragEvent: function (isF) {var father = document.getElementById("public_theme_list");//父容器var btns = father.getElementsByClassName("public-drag-btn");//事件源对象var items = father....
  • Shapeshift- 支持IOS,Android,手机 移动端 拖拽排序功能
  • 拖拽滑动验证码插件,实现移动端滑动解锁
  • 关于zepto.js的移动端拖拽写法

    千次阅读 2016-07-21 16:56:36
    zepto.js; 移动端拖拽; js拖拽;
  • 移动端拖拽字母AB

    2019-03-14 09:27:07
    移动端根据手指滑动完成字母A与B的写法,并有判断执行对与错。
  • 本文实例为大家分享了JavaScript实现移动端拖动元素的具体代码,供大家参考,具体内容如下 实现效果: 请切换到移动端页面查看! 代码实现: <!DOCTYPE html> <html lang=en> <head> <meta ...
  • html5移动端拖拽图片、拖拽标签等插件以及相应的demo、适用于手机网址开发和mui前端开发、h5app开发中的图片拖拽等
  • vue 移动端 拖拽

    2021-07-05 10:31:17
    创建一个div,因为是移动端的,所以用touchmove事件,触发一个函数。(里边的span标签是为了使用iconfont) <template> <div> <div class="active" id="active" :style="{top:top,left:left}" @...
  • 移动端拖拽事件

    2020-12-29 18:57:46
    1. 移动端怎样适配的 1.设置viewport <meta name="viewport" content="width=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 2.媒体查询 使用@media...
  • vue移动端拖动排序

    2021-06-15 16:24:44
    vue移动端拖动排序 前言 我们移动端排序,如果使用drag拖动事件会有重影,在移动端会显得不是很友好,还是需要控制dom的位置去实现。效果自己复制代码运行就可以看到效果; 一、直接上代码 <template> <...
  • 使用移动端的事件来组成拖拽的步骤,touchstart, touchmove,touchend3.关于元素坐标获取不适用之前的clientX(clientY),采用新的targetTouches[0].pageX(targetTouches[0].pageY)4.拖拽之后需...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,895
精华内容 6,358
关键字:

移动端拖拽