拖动元素

最新推荐文章于 2024-04-02 08:43:45 发布

碵蝎

最新推荐文章于 2024-04-02 08:43:45 发布

阅读量330

点赞数

分类专栏：旧技术

本文链接：https://blog.csdn.net/QQ408896436/article/details/52574334

版权

旧技术专栏收录该内容

28 篇文章 0 订阅

订阅专栏

move.js

var Move = function(obj)
{
	var self = this;
	var config = {};
	this.obj = null;
	this.w = null;
	this.h = null;
	this.type = 'both';
	this.mode = 0;
	this.screenDistances_X = 0;
	this.screenDistances_Y = 0;
	this.sx = 0;
	this.sy = 0;
	this.screenW = document.documentElement.clientWidth;
	this.screenH = document.documentElement.clientHeight;

	this.init = function()
	{
		for(var i in obj)
		{
			config[i] = obj[i];
		}
	}();

	this.addEvent = function()
	{
		config['obj'].addEventListener('touchstart', function(e){

		     self.sx = parseInt( e.targetTouches[0].pageX );	
		     self.sy = parseInt( e.targetTouches[0].pageY );
		     self.screenDistances_X = parseInt( this.getBoundingClientRect().left );
		     self.screenDistances_Y = parseInt( this.getBoundingClientRect().top );

		}, false);

		config['obj'].addEventListener('touchmove', function(e){ 

			 var tempx = parseInt( e.targetTouches[0].pageX );
		     var tempy = parseInt( e.targetTouches[0].pageY );

		     var left = tempx - (self.sx - self.screenDistances_X);
		     var top = tempy - (self.sy - self.screenDistances_Y);

		     if (config['type'] == 'hor' || config['type'] == 'both') 
		     {
		     	 if (config['mode'] == 0) 
		     	 {
		     	 	 if (left <= 0) 
				     { 
				     	this.style.left = 0; 
					 }
					 else if(left + config['w'] > self.screenW)
					 {
					 	this.style.left = self.screenW - config['w'] + 'px'; 
					 }
					 else
					 {
					 	this.style.left = left + 'px';
					 }
		     	 }
		     	 else
		     	 {
		     	 	this.style.left = left + 'px';
		     	 }
		     }
		     
		     if (config['type'] == 'ver' || config['type'] == 'both') 
		     {
		     	if (config['mode'] == 0) 
		     	 {
					 if (top <= 0) 
				     { 
				     	this.style.top = 0; 
					 }
					 else if(top + config['h'] > self.screenH)
					 {
					 	this.style.top = self.screenH - config['h'] + 'px'; 
					 }
					 else
					 {
					 	this.style.top = top + 'px';
					 }
				}
				else
				{
					this.style.top = top + 'px';
				}
			}

			if (typeof e.preventDefault != 'undefined'){
				e.preventDefault();        
				e.stopPropagation(); 
			}
		    else
		    {
		        e.returnValue = false 
		    }

		}, false);
	}
}

html

<!doctype html>
<html lang="en">
<head>
	<meta charset="gbk">
	<meta name="author" content="Tencent-TGideas">
	<meta name="format-detection" content="telephone=no" />
	<meta name="viewport" content="width=320,minimum-scale=1,maximum-scale=5,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="Description" content="" />
	<meta name="Keywords" content="" />
	<title>move</title>
	<style>
		body{margin: 0; padding: 0; overflow: hidden; font-size: 9px; text-align: center;}
		.box{ width: 50px; height: 50px; cursor: pointer; position: absolute; top: 0; left: 0; border-radius: 50%; line-height: 50px; }
		#box1{left: 0; background: red;}
		#box2{left: 60px; background: pink;}
		#box3{left: 120px; background: green;}
		#box4{left: 180px; background: yellow;}
	</style>
</head>
<body>
	<div id='box1' class='box'><a href="http://www.baidu.com" title='百度一下'>百度一下</a></div>
	<div id='box2' class='box'><a href="http://www.baidu.com" title='百度一下'>百度一下</a></div>
	<div id='box3' class='box'><a href="http://www.baidu.com" title='百度一下'>百度一下</a></div>
	<div id='box4' class='box'><a href="http://www.baidu.com" title='百度一下'>百度一下</a></div>
	<script src='js/move.js'></script>
	<script>
		new Move({
			'obj' : document.getElementById('box1'),
			'w' : 50,
			'h' : 50,
			'type' : 'ver',
			'mode' : 0
		}).addEvent();

		new Move({
			'obj' : document.getElementById('box2'),
			'w' : 50,
			'h' : 50,
			'type' : 'hor',
			'mode' : 0
		}).addEvent();

		new Move({
			'obj' : document.getElementById('box3'),
			'w' : 50,
			'h' : 50,
			'type' : 'both',
			'mode' : 0
		}).addEvent();

		new Move({
			'obj' : document.getElementById('box4'),
			'w' : 50,
			'h' : 50,
			'type' : 'both',
			'mode' : 1
		}).addEvent();

	</script>
</body>
</html>

碵蝎

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
拖动元素

move.jsvar Move = function(obj){ var self = this; var config = {}; this.obj = null; this.w = null; this.h = null; this.type = 'both'; this.mode = 0; this.screenDistances_X = 0; this.sc...
复制链接

扫一扫

专栏目录