拖动到目标位置的元素还能拖动怎么解决
<!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 星