如果点击任何左侧框将仅附加到右侧第一个框

Question

如果点击任何左侧框将仅附加到右侧第一个框。在填充第一个框之后第二个框将附加。 在每个右侧框中应该只有一个框。

check this link

<script> 
$(document).ready(function(){ 
    $(".box").click(function(){ 
    $(this).appendTo('.box2'); 
    }); 
}); 
</script> 
<style> 
.box{width:50px;height:50px;background:red;margin-bottom:5px;} 
.leftbox{width:300px;float:left;} 
.box2{width:100px;height:100px;background:#999;float:left;margin-right:10px;margin-bottom:10px;} 

.rightbox{width:900px;height:600px;float:left;border:1px solid #999;overflow:scroll;padding:10px;} 
</style> 

<div class="leftbox"> 
<div class="box">1</div> 
<div class="box">2</div> 
<div class="box">3</div> 
<div class="box">4</div> 
<div class="box">5</div> 
</div> 

<div class="rightbox"> 
<div class="box2"></div> 
<div class="box2"></div> 
<div class="box2"></div> 
<div class="box2"></div> 
<div class="box2"></div> 
<div class="box2"></div> 
<div class="box2"></div> 
<div class="box2"></div> 
<div class="box2"></div> 
<div class="box2"></div> 
</div> 

Answer 1

从什么我的理解，你可以使用这样的变量目标各.box2一个接一个：

FIDDLE

var i = 0; 
 
$(document).ready(function() { 
 
    $(".box").click(function() { 
 
    i++; 
 
    $(this).appendTo('.box2:nth-child(' + i + ')'); 
 
    }); 
 
});

.box { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: red; 
 
    margin-bottom: 5px; 
 
} 
 

 
.leftbox { 
 
    width: 300px; 
 
    float: left; 
 
} 
 

 
.box2 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #999; 
 
    float: left; 
 
    margin-right: 10px; 
 
    margin-bottom: 10px; 
 
} 
 

 
.rightbox { 
 
    width: 900px; 
 
    height: 600px; 
 
    float: left; 
 
    border: 1px solid #999; 
 
    overflow: scroll; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="leftbox"> 
 
    <div class="box">1</div> 
 
    <div class="box">2</div> 
 
    <div class="box">3</div> 
 
    <div class="box">4</div> 
 
    <div class="box">5</div> 
 
</div> 
 

 
<div class="rightbox"> 
 
    <div class="box2"></div> 
 
    <div class="box2"></div> 
 
    <div class="box2"></div> 
 
    <div class="box2"></div> 
 
    <div class="box2"></div> 
 
    <div class="box2"></div> 
 
    <div class="box2"></div> 
 
    <div class="box2"></div> 
 
    <div class="box2"></div> 
 
    <div class="box2"></div> 
 
</div>

Answer 2

你可以做的另一种方法是增加一个类（在这种情况下，“未使用”），并删除它一旦框添加

https://jsfiddle.net/fq7rn3s1/

<div class="leftbox"> 
<div class="box">1</div> 
<div class="box">2</div> 
<div class="box">3</div> 
<div class="box">4</div> 
<div class="box">5</div> 
</div> 

<div class="rightbox"> 
<div class="box2 unused"></div> 
<div class="box2 unused"></div> 
<div class="box2 unused"></div> 
<div class="box2 unused"></div> 
<div class="box2 unused"></div> 
<div class="box2 unused"></div> 
<div class="box2 unused"></div> 
<div class="box2 unused"></div> 
<div class="box2 unused"></div> 
<div class="box2 unused"></div> 
</div> 


$(document).ready(function(){ 
    $(".box").click(function(){ 
    var box2 = $(".rightbox").find(".unused")[0]; 
    $(box2).removeClass("unused"); 
    $(this).appendTo($(box2)); 
    }); 
});