Javascript将多个元素移动到单独的div'；来回

有3个视频，放在3个单独的分区中。 还有3个单独的div，但位于页面的其他位置（比如contA、contB和contC）。 我想，如果我点击video1，那么video2和video3将进入contA和contB，video1将进入contC。 如果我再次单击video1，则所有视频都会返回其原始位置。 如果我点击video2（当它在contA中时），那么video1进入contA，video3进入contB，video2进入contC

我准备了一个jsbin演示：

有人能帮忙吗？谢谢

编辑：（按要求添加代码）

HTML:

---

我想这就是你想要的，但它是基于示例中使用的命名约定。我还冒昧地将contA/contB和contC重命名为cont1、cont2和cont3，因为它更易于操作

---

当期望的结果变得更清晰时，我会编辑这个答案，但我想我可以给你一些信息，让你朝着正确的方向前进

代码部分“但我需要将每个视频放入不同的控制”

我会利用一个数据属性，让每个控件跟踪自己

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

如果您需要更多信息，请在jsbin上发布一些带有更新的问题，这样我就可以看到您遇到的问题

---

Cheers

按要求发布@j08691它在jsbin示例上不起作用的原因是没有向JQuery添加引用。最简单的方法是单击“添加库”按钮。也就是说，您是否有包含div contA、contB和contC的示例？或者当前的div是那些容器吗？@Me.Name我已经编辑了代码，请现在检查谢谢，这使测试更容易：）只是要清楚，当你说回到原来的位置时，你的意思是他们在页面布局中开始的div，对吗？是的，准确地说：Video1>Video1，Video2>Video2，Video3>vid3。效果很好，但我无法回到他们原来的位置。可能是我的错误，但我自己使用了相同的代码。它是有效的，只是我有一些其他的脚本，它们相互干扰。我会试着自己解决这个问题。非常感谢，我的问题得到了回答，@Me.Name！你好，@Me.Name！我有另一个问题与视频在div之间移动有关。你能查一下吗？也许你也可以帮我。谢谢！嘿，好了，@yte！我有另一个问题与视频在div之间移动有关。你能查一下吗？也许你也可以帮我。谢谢！

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

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


}
});

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