javascript面向对象编程拖拽生成无数个元素

面向对象编程应用

css
<style type="text/css">
			.active div {
				position: absolute;
				top: 10;
				left: 10;
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>

html
<div class="active">
			<input type="text" placeholder="输入id" />
			<button>生成一个方块</button>
		</div>

js
<script type="text/javascript">
		var ipt = document.getElementsByTagName('input')[0];
		var btn = document.getElementsByTagName('button')[0];
		var active = document.getElementsByClassName('active')[0];
		//点击事件  
		btn.onclick = function() {
			if(document.getElementById(ipt.value) == undefined) {
				//  创建构造函数
				function tabswitch(id) {
					this.odiv = null;
					this.id = id;
					//创建div标签
					this.abbr = function() {
						this.odiv = document.createElement('div');
						this.odiv.id = this.id;
						active.appendChild(this.odiv);
						console.log(this.odiv);
					}
					this.abbr();
					tabswitch.prototype.move = function() {
						var odiv = this.odiv;
						//给需要移动的元素添加onmousedown事件
						odiv.onmousedown = function(ev) {
							var event = window.event || ev;
							// 获取屏幕中可视化的宽高的坐标
							var dx = event.clientX - odiv.offsetLeft;
							var dy = event.clientY - odiv.offsetTop;
							console.log(event);
							console.log(dy)
							//实时改变目标元素odiv的位置
							document.onmousemove = function(ev) {
								var event = window.event || ev;
								odiv.style.left = event.clientX - dx + 'px';
								odiv.style.top = event.clientY - dy + 'px';
							}

							//抬起停止拖动
							document.onmouseup = function() {
								document.onmousemove = null;
								document.onmouseup = null;

							}
						}
					}
				}

				var obj = new tabswitch(ipt.value);
				obj.move();
			} else {
				alert('id已存在！')

			}

		}
	</script>

效果图