Javascript move multiple elements to separate div&

问题:

There are 3 videos, placed in 3 separate div's. There also are 3 separate div's, but in other position of a page (lets say contA and contB and contC). I want that if I click on the video1, then video2 and video3 goes to contA and contB, and video1 goes to contC. If I click video1 again, all videos go back to their original position. If I click on video2 (while its in contA), then video1 goes to contA, video3 goes to contB, video2 goes to contC.

I have prepared a jsbin demo: Jsbin DEMO

Anyone could help? Appreciated!

EDIT: (Added a code as requested)

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

回答1:

Think this is what you're looking for, but it's based on the naming convention used in the example. I also took the liberty of renaming contA/contB and contC to cont1, cont2 and cont3, because it's easier to manipulate.

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


}
});

回答2:

I will edit this answer as the desired results become more clear but i think i can give you some info to get you going in the right direction.

the section of code "but i need each video to be put to a diff cont"

I would leverage a data attribute and let each control keep track of itself.

    $video.each(function()
    { 
        var targetdiv = $(this).data('origonal-div');
        $(targetdiv.ToString()).append(this);
                    //optionally update the data value to keep track of the next location to append to.
    }

if you need more info post some questions with an update on the jsbin so i can see where you are having trouble.

Cheers