前端图片拖拽

http://www.gbtags.com/gb/gbtutorials/448.htm

上面网址是用html5 的拖拽api实现的，但经测试，手机上不起作用。

下面是我专门针对移动设备写的触摸拖动效果：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>    
    <title>可拖动的div</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        #aimObj{
            position:absolute;
            background-color: #39f;
            height:60px;
            width:60px;
            border-radius: 30px;
        }
        #cont{
            position: absolute;
            top:100px;
            left:30px;
            width:400px;
            height:600px;
            background-color:#999;
        }
    </style>
</head>
<body>
    <div id="cont">
        <div id="aimObj" draggable="true"></div>
    </div>    
</body>
<script type="text/javascript">
    var obj=document.querySelector("#aimObj");
    var ix,iy;
    obj.addEventListener('touchstart',function(event){
        if (event.targetTouches.length == 1) {
            event.preventDefault();
            var touch = event.targetTouches[0];
            //getComputedStyle函数可参考网址：http://blog.sina.com.cn/s/blog_89cd68470101i108.html
            var ox=parseInt(getComputedStyle(this,false)["left"]);
            ox=ox?ox:0;
            var oy=parseInt(getComputedStyle(this,false)["top"]);
            oy=oy?oy:0;
            ix=touch.pageX-parseInt(ox);
            iy=touch.pageY-parseInt(oy);
        }
    },false);
    obj.addEventListener('touchmove',function(event){
         // 如果这个元素的位置内只有一个手指的话
        if (event.targetTouches.length == 1) {
    　　　　 event.preventDefault();// 阻止浏览器默认事件，重要 
            var touch = event.targetTouches[0];
            // 把元素放在手指所在的位置
            var ax=parseInt(touch.pageX-ix);
            var ay=parseInt(touch.pageY-iy);
            this.style.left = ax+"px";
            this.style.top = ay+"px";
            }
    },false);
</script>
</html>

posted @ 2015-10-21 16:00 muguang_lijing 阅读(398) 评论(0) 收藏举报

刷新页面返回顶部