老师，为什么我这个拖动，直接拖了三个过去？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖拽问卷</title>
<style>
.page{
width:1000px;
}
.left{
float: left;
width: 500px;
}
.right{
float: left;
width: 500px;
box-sizing: border-box;
border-left: 1px solid red;
}
.left .container{
padding: 10px;
min-height: 500px;
box-sizing: border-box;
}
.left .containerDrop{
background-color:#eee;
}
.left h1{
text-align:center;
}
.right .ctrlList{
padding: 10px;
}
.right .ctrlList .box{
border:1px dashed gray;
margin-top: 10px;
margin-bottom: 10px;
}
.line{
margin-top:10px;
margin-bottom: 10px;
padding: 5px;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
</head>
<body>
<div class="page">
<div class="left">
<div class="container" id='container'>
<h1>问卷</h1>
</div>
</div>
<div class="right">
<div class="ctrlList">

<div class="box" draggable='true'>
<div class="line">
<span>姓名：</span>
<input type="text" name="name" placeholder="请输入您的姓名">
</div>
</div>

<div class="box" draggable='true'>
<div class="line">
<span>年龄：</span>
<input type="text" name="age" placeholder="请输入您的年龄">
</div>
</div>

<div class="box" draggable='true'>
<div class="line">
<span>性别：</span>
<label><input type="radio" value="male">男</label>
<label><input type="radio" value="female">女</label>

</div>
</div>


</div>
</div>
</div>


<script type="text/javascript">
$(function(){
var dragSrc
$('.box').each(function(index,ele){
$(ele).on('dragstart',function(event){
dragSrc=this;
console.log(dragSrc);

});
$('#container').on('drop',function(e){
e.preventDefault();
$(this).append($(dragSrc).clone());
$(this).removeClass('containerDrop');

}).on('dragover',function(e){
e.preventDefault();

}).on('dragenter',function(e){
e.preventDefault();
$(this).addClass('containerDrop');
}).on('dragleave',function(e){
e.preventDefault();
$(this).removeClass('containerDrop');

});






})



})


</script>
</body>
</html>

aleeeeex 2019-01-12

源自：HTML5拖拽上传 4-3 拖拽问卷（3）

收起

2回答

whiteDive 回答被采纳获得+3积分 2019-01-13 21:13:49

<script type="text/javascript">
    $(function () {
        var dragSrc;
        $('.box').each(function (index, ele) {
            $(ele).on('dragstart', function (event) {
                dragSrc = this;
                console.log(dragSrc);
            });
        });
        $('#container').on('drop', function (e) {
            e.preventDefault();
            $(this).append($(dragSrc).clone());
            $(this).removeClass('containerDrop');

        }).on('dragover', function (e) {
            e.preventDefault();

        }).on('dragenter', function (e) {
            e.preventDefault();
            $(this).addClass('containerDrop');
        }).on('dragleave', function (e) {
            e.preventDefault();
            $(this).removeClass('containerDrop');

        });
    });
</script>

收起回答

aleeeeex 提问者 #1

明白了，谢谢。

2019-01-15 14:28:49

whiteDive 2019-01-12 22:06:07

3个div都有box类呀

收起回答

提问者 aleeeeex #1

拖动的时候dragsrc只获取到一个的。

2019-01-13 10:15:46
whiteDive 回复提问者 aleeeeex #2

我知道了你把#container绑定事件的函数都写在了each函数里面造成了一次就克隆3个div的错误 each函数只是确定哪个对象绑在dragSrc上

2019-01-13 21:10:58
whiteDive 回复提问者 aleeeeex #3

<script type="text/javascript"> $(function () { var dragSrc; $('.box').each(function (index, ele) { $(ele).on('dragstart', function (event) { dragSrc = this; console.log(dragSrc); }); }); $('#container').on('drop', function (e) { e.preventDefault(); $(this).append($(dragSrc).clone()); $(this).removeClass('containerDrop'); }).on('dragover', function (e) { e.preventDefault(); }).on('dragenter', function (e) { e.preventDefault(); $(this).addClass('containerDrop'); }).on('dragleave', function (e) { e.preventDefault(); $(this).removeClass('containerDrop'); }); }); </script>

2019-01-13 21:13:31