H5 드래그 예(단, 휴대폰 단말기가 잘못됨)

2996 단어 프런트 엔드
<html>
<head>
    <title> title>
    <style>
        body{

        }
        img{
            position: fixed;
        }
    style>
head>
<body>
    <img id="p3"  src="kefu.png">
body>
<script>
    p3.ondragstart=function(e){
        console.log(' p3 ');
        // , 
        offsetX= e.offsetX;
        offsetY= e.offsetY;
    }
    p3.ondrag=function(e){
        console.log(' p3 ');
        var x= e.pageX;
        var y= e.pageY;
        console.log(x+'-'+y);
        //drag , ,pageX pageY 0
        if(x==0 && y==0){
            return; // X Y 0 
        }
        x-=offsetX;
        y-=offsetY;

        p3.style.left=x+'px';
        p3.style.top=y+'px';
    }
    p3.ondragend=function(){
        console.log(' p3 ');
    }
script>

html>

좋은 웹페이지 즐겨찾기