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

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

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以做的另一个选择是添加另一个类（在这种情况下＆＃39;未使用＆＃39;）并在添加该框后将其删除

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