×
首页编程语言正文
IT源码网

html5拖拽实现

leader 2021年02月16日 编程语言 446 0

1.需求

做一个h5正方形的拖拽框

2.分析

使用touchstart,touchmove,touchend这3个事件实现.

需要记录的数据有三组数据，分别是下图的(x0,y0),(x1,y1),(x2,y2)。A点表示最开始的点击位置

3.代码实现

下面是html和css部分，很简单的一部分

<style> 
        #outer{ 
            position: relative; 
            width: 300px; 
            height: 300px; 
            background: green; 
        } 
        #inner{ 
            position: absolute; 
            left: 0; 
            top:0; 
            width: 100px; 
            height: 100px; 
 
            background: red; 
        } 
    </style> 
 
 
<div id="outer"> 
    <div id="inner"> 
    </div> 
</div>

 

下面是js代码实现部分

记得要引入jq库哦！~

<script src="jquery-1.7.2.min.js"></script> 
<script> 
 
var outer =document.getElementById('outer'); 
var inner =document.getElementById('inner'); 
 
 
var move={ 
    sLeft:0, 
    sTop:0, 
    curLeft:0, 
    curTop:0, 
    startX:0, 
    startY:0, 
    makeMove:function(e){ 
        var e= e || window.event; 
        var touch =e.changedTouches[0]; 
        var x=touch.clientX; 
        var y=touch.clientY; 
 
        l = x - this.sLeft; 
        t = y - this.sTop; 
 
        //边界判断最小值 
 
        l = l<0?0:l; 
        t = t<0?0:t; 
        //边界判断最da值 
        var maxLeft = 300-100; 
        var maxTop = 300-100; 
 
        l = l>maxLeft ?maxLeft:l; 
        t = t>maxTop?maxTop:t; 
 
        move.curLeft = l; 
        move.curTop = t; 
        $('#inner').css({ 
            'left':move.curLeft +'px', 
            'top':move.curTop+'px' 
        }) 
 
    } 
} 
inner.addEventListener('touchstart',function(e){ 
    //获得初始坐标 
    var e= e || window.event; 
    var touch =e.changedTouches[0]; 
    var x=touch.clientX; 
    var y=touch.clientY; 
 
    //对象属性赋值 
    move.sLeft = x-move.curLeft; 
    move.sTop = y-move.curTop; 
    move.startX=x; 
    move.startY=y; 
 
 
    $('#inner').css({ 
        'left':move.curLeft+'px', 
        'top':move.curTop+'px' 
    }) 
},false); 
 
inner.addEventListener('touchmove',function(e){ 
    //获得坐标 
    var e= e || window.event; 
    var touch =e.changedTouches[0]; 
    var x=touch.clientX; 
    var y=touch.clientY; 
 
    //获得偏移的值 
    move.makeMove(e); 
 
},false); 
 
inner.addEventListener('touchend',function(e){ 
 
},false); 
 
</script>

 

评论关闭
IT源码网
IT源码网 HTML5

微信公众号号：IT虾米 （左侧二维码扫一扫）欢迎添加！