# myjs

**Repository Path**: gaoyiyang/myjs

## Basic Information

- **Project Name**: myjs
- **Description**: 项目中使用到的一些js代码
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2018-11-09
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# myjs

## 项目介绍
自用js库

## 软件架构
软件架构说明

## 内容

### 1.drag添加拖动事件
调用js文件中的函数，为页面中的元素添加拖动事件以及拖动后的回调函数。  
    
	<div style="height: 130px;">
			<h2>普通拖动事件</h2>
			<div style="width: 100px;height: 100px;background: red;" id="test1"></div>
			<script>
				setDrag("#test1");
			</script>
		</div>
		<div style="height: 130px;">
			<h2>拖动后回调</h2>
			<div style="width: 100px;height: 100px;background: red;" id="test2"></div>
			<script>
				setDrag("#test2", function(e) {
					alert(e.x + "," + e.y);
				});
			</script>
		</div>
		<div style="height: 130px;">
			<h2>生成拖动层拖动后并回调</h2>
			<div style="width: 100px;height: 100px;background: red;" id="test3"></div>
			<script>
				setVirtualDrag("#test3", function(e) {
					alert(e.x + "," + e.y);
				});
			</script>
		</div>
		<div style="height: 130px;">
			<h2>生成拖动层拖动时回调</h2>
			<div style="width: 100px;height: 100px;background: red;" id="test4"></div>
			<script>
				setVirtualDragMousemove("#test4", function(e) {
					console.dir(e.x+","+e.y);
				});
			</script>
		</div>
  
具体使用方法见drag/demo.html  

### 2.animation添加动画事件
调用animation.js中的animation函数，为一个页面元素添加动画。  

	<div id="test" style="width: 100px;height: 100px;border: red 1px solid;"></div>
		<button id="btn1">向右移动100px</button>
		<button id="btn2">向左移动100px</button>
		<script>
			var btn1 = document.getElementById("btn1");
			var btn2 = document.getElementById("btn2");
			var div = document.getElementById("test");
			btn1.addEventListener("click",function(){
				animation(div,{"marginLeft":parseFloat(div.style.marginLeft||0)+100+"px"},function(dom){
					console.log("marginLeft:"+dom.style.marginLeft);
				});
			})
			btn2.addEventListener("click",function(){
				animation(div,{"marginLeft":parseFloat(div.style.marginLeft||0)-100+"px"},function(dom){
					console.log("marginLeft:"+dom.style.marginLeft);
				});
			})
		</script>

详见animation/demo.html

### 3.popup文本域弹出层

调用popup.js中的popup函数，为一个文本域或输入框添加弹出层，详见popup/demo.html。
	
	<textarea id="txt1"></textarea>
		<script>
			popup(document.getElementById("txt1"), {
				options: ["test1", "test2"],
				search: true
			});
		</script>

参考了[kingwolfofsky的博文](https://blog.csdn.net/kingwolfofsky/article/details/6586029)设置文本域的光标坐标，
实现弹出层跟随光标位置，但是尚存在BUG。