拖动到目标位置的元素还能拖动怎么解决

拖动到目标位置的元素还能拖动怎么解决

<!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);
}

http://img1.sycdn.imooc.com//climg/5aa4e5f9000182c805910276.jpg

如图 这些是被拖动过去的图标,但是按住图标还是可以拖动

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

定义html结构的时候这样定义

http://img1.sycdn.imooc.com//climg/5aa5f5ef0001608807480210.jpg

拖拽的时候只把类名为line的结构复制过去即可。

  • hunmix 提问者 #1
    emmm还有个问题,就是拖动过去的元素是没有样式的,如何做到样式一样呢,重写一遍么
    2018-03-12 14:10:41
  • 想取的名字都被占了 回复 提问者 hunmix #2
    你写样式的时候是用的后代选择器,拖过去过后祖先变化了
    2018-03-12 17:16:34
  • hunmix 提问者 回复 想取的名字都被占了 #3
    嗯嗯 3Q
    2018-03-13 14:11:29
怎么都被占用了呢 2018-03-12 15:55:42

拖过去的元素有样式呀,因为类名还在,样式就会起作用的。定义样式的时候,也要考虑在左边的显示情况。

  • 提问者 hunmix #1
    好哒 知道了
    2018-03-13 14:11:47
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
组件化思想开发电商网页 18版
  • 参与学习           人
  • 提交作业       467    份
  • 解答问题       4826    个

本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识,不仅如此,还会学习如何利用组件化的思想来开发网页,知识点+案例,使得所学可以更好的得到实践。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师