使用HTML5的拖拽做一个面板，拖动过去显示对应的样式

Posted 2021-06-15 单纯丶稀饭

html

<div class="box" ></div><div class="small"> <div class="num1" draggable="true" data-name="h1">1级标题</div> <div class="num1" draggable="true" data-name="h2">2级标题</div> <div class="num1" draggable="true" data-name="h3">3级标题</div> <div class="num1" draggable="true" data-name="h4">4级标题</div> <div class="num1" draggable="true" data-name="h5">5级标题</div> <img src="images/yingyue%20.svg" alt="" width="50" draggable="true" class="num1" data-name="imgs"> <button data-name="btn" class="num1" draggable="true">按钮</button></div>

CSS

.box { width: 375px; height: 400px; margin: 10px auto 0; box-sizing: border-box; border: dotted 1px red; } .small { position: fixed; left: 50px; top: 30px; } .num1 { border: 1px solid green; } button{ border: none; display: block; margin: 0 auto 10px; background-color: #5bc0de; }

javascript

let box = $('.box')let num1 = $$('.small .num1')//包装方法function gy(tag,name,obj) { //定义参数 标签和名字 和 对象-（宽度和路径）传入对象的原因是因为可以不传，传一个空的。 tag = document.createElement(tag) tag.innerHTML = name let w = obj.w //宽度 let img_src = obj.img_src //图片路径 tag.width = w tag.src = img_src let colorr = obj.colorr tag.style.color = colorr let bgcolor = obj. bgcolor tag.style.backgroundColor = bgcolor box.append(tag)}//被拖拽的元素num1.forEach(function (item){ item.addEventListener('dragstart',function (e){ let name = this.getAttribute('data-name')//获得属性 e.dataTransfer.setData('data',name) //获得到数据，然后给他设置 })})//拖拽进去的盒子 //drop推动box.addEventListener('drop',function (e){ e.preventDefault() let data = e.dataTransfer.getData("data"); //获取到数据 switch (data){ case 'h1': gy('h1','我是一个一级标题',{}) break case 'h2': gy('h2','我是一个二级标题',{}) break case 'h3': gy('h3','我是一个三级标题',{}) break case 'h4': gy('h4','我是一个四级标题',{}) break case 'h5': gy('h5','我是一个五级标题',{}) break case 'imgs': gy('img','我是一个五级标题',{ img_src: 'images/yingyue%20.svg', w:50, }) break case 'btn': gy('button','我是一个按钮',{ w: 50 + 'px', colorr: 'red', bgcolor: '#61f171' }) break }})//dragover 拖过box.addEventListener('dragover',function (e){ e.preventDefault()})

效果如下图