javascript - Javascript将多个元素 move 以分隔div和返回

有3个视频，分别放置在3个单独的div中。
还有3个单独的div，但是在页面的其他位置（让我们说contA和contB和contC）。
我想要如果我单击video1，则video2和video3转到contA和contB，而video1转到contC。
如果我再次单击video1，所有视频将恢复到原始位置。
如果我单击video2（其在contA中），则video1进入contA，video3进入contB，video2进入contC。

我准备了一个jsbin演示：
Jsbin DEMO

有人可以帮忙吗？感激！

编辑：（根据要求添加了代码）

HTML：

    <div id="vid1">
          <video id="Video1" class="videos">
          <source src="http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" type="video/mp4"></source>
         HTML5 Video is required for this example.
    </video>
    </div>

    <div id="vid2">
          <video id="Video2" class="videos">
          <source src="http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" type="video/mp4"></source>
         HTML5 Video is required for this example.
    </video>
    </div>

    <div id="vid3">
          <video id="Video3" class="videos">
          <source src="http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" type="video/mp4"></source>
         HTML5 Video is required for this example.
    </video>
    </div>

<div id="contA"><br>first container<br></div>
<div id="contB"><br>second container<br></div>
<div id="contC"><br>third container<br></div>

JavaScript：

$(window).load(function()
{
    //add event for all videos
    $('.videos').click(videoClicked);


function videoClicked(e)
{
        //get a referance to the video clicked
    var sender = e.target;

    //get all the videos
    var $videos = $('.videos');

      $videos.appendTo('#contA');
      $videos.appendTo('#contB'); //but I need each video to be put to different div: #contA, #contB...

$videos.not(sender).appendTo('#contC'); //if I put the clicked video into this container, it does not go back to original one.
}
});

最佳答案

认为这是您要查找的内容，但是它基于示例中使用的命名约定。我还随意将contA / contB和contC重命名为cont1，cont2和cont3，因为它更易于操作。

JSBin demo

  //remember last video clicked (you could check last container instead)
var lastclicked;

function videoClicked(e)
{
    //get a reference to the video clicked
    var sender = e.target;
  //get all the videos
    var $videos = $('.videos');

    if(sender==lastclicked){
      //reset to original positions

      $.each($videos,function(){
        var ind =     this.id.substring(this.id.length-1); //based on the video + number naming convention
        $(this).appendTo('#vid' + ind);
      });
      lastclicked = null;
      return;
    }

    lastclicked= sender;

     var i = 1;
     //place all non clicked videos in cont1/cont2/etc
     $.each($videos.not(sender),function()
     {
       $(this).appendTo('#cont' + i++ );
     });

     //place the clicked video in the last container
     $(sender).appendTo('#cont' + i ); //always cont3 with fixed divs, but this is dynamic in case you add more


}
});