您的位置：首页 > Web前端 > JavaScript

一个用在手机上的简单js拖拽效果

2016-05-12 19:15 776 查看

http://blog.163.com/xiaoyou_000/blog/static/65067392201521664214534/
http://www.17sucai.com/pins/8765.html 手机拖拽效果

<!doctype html>

<html>

<head>

<meta charset='utf-8' />

<meta name="viewport"

content="

width = device-width ,

height = device-height ,

initial-scale = 1,

minimum-scale = 1,

maximum-scale = 1,

user-scalable =no,

"

/>

<title></title>

</head>

<body>

<div id="div" style="width:100px;height:100px;background-color:red;position:absolute;"></div>

<script>

var div = document.getElementById('div');

div.addEventListener('touchmove', function(event) {

event.preventDefault();//阻止其他事件

// 如果这个元素的位置内只有一个手指的话

if (event.targetTouches.length == 1) {

var touch = event.targetTouches[0]; // 把元素放在手指所在的位置

div.style.left = touch.pageX + 'px';

div.style.top = touch.pageY + 'px';

div.style.background = "green";

}

}, false);

</script>

</body>

</html>

2.http://blog.csdn.net/pvfhv/article/details/6174337

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航