拖动到目标位置的元素还能拖动怎么解决
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>questionnaire</title> <link rel="stylesheet" href="css/style.css"> <script src="https://cdn.bootcss.com/jquery/1.7/jquery.min.js"></script> </head> <body> <section class="questionnaire"> <div class="left"><p>问卷</p></div> <div class="right"> <div class="item" draggable="true"> <label for="name">姓名:</label> <input type="text" id="name"> </div> <div class="item" draggable="true"> <label for="old">年龄:</label> <input type="text" id="old"> </div> <div class="item" draggable="true"> <input type="radio" name="sex" value="male" id="male"> <label for="male">男</label> <input type="radio" name="sex" value="female" id="female"> <label for="female">女</label> </div> <div class="item" draggable="true"> <input type="submit" value="提 交"> </div> </div> </section> <script src="js/js.js"></script> </body> </html>
*{ padding:0; margin:0; } .questionnaire{ display: flex; margin-top: 20px; } .left{ flex:1; text-align: center; border:1px solid #ccc; margin-left: 10px; } .left>.item{ margin:0 auto 5px auto; padding:10px; max-width: 300px; } .left>.item>input{ padding:5px; } .left>.item>input[type="submit"]{ justify-content: center; text-align: center; width:180px; margin-left: 50px; } .left>.item>label[for="male"]{ margin-right: 10px; } .right{ flex:1; } .right>.item{ margin-left: 100px; padding:10px; max-width: 300px; border:2px #999 dashed; margin-bottom: 10px; } .right>.item>input{ padding:5px; } .right>.item>input[type="submit"]{ justify-content: center; text-align: center; width:180px; margin-left: 50px; } .right>.item>label[for="male"]{ margin-right: 10px; }
var right=document.getElementsByClassName('right')[0], items=right.getElementsByClassName('item'), paper=document.getElementsByClassName('left')[0], dragItem=null; right.addEventListener('dragstart',function(e){ dragItem=e.target; }) paper.ondragover=function(e){ e.preventDefault(); } paper.ondrop=function(e){ // e.preventDefault(); var newItem=dragItem.cloneNode(true); this.appendChild(newItem); }
如图 这些是被拖动过去的图标,但是按住图标还是可以拖动
25
收起
正在回答
2回答
定义html结构的时候这样定义
拖拽的时候只把类名为line的结构复制过去即可。
组件化思想开发电商网页 18版
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识,不仅如此,还会学习如何利用组件化的思想来开发网页,知识点+案例,使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星