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

谁践踏了优雅 2022-01-26 14:17 119阅读 0赞

## 面向对象编程应用 ##

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>

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20220126/906c297ad8f645a9ad17117740257592.png