Question

我必须将div从当前位置动画到左上角，我该怎么做

CSS和HTML代码看起来像这样

＆＃13;

.addProducts {
  Height:700px;
  width:70%;
  background-color:skyblue;     
}
.productHolder{
  overflow-y: scroll; 
  width:50%;
  height:500px;
  background-color:yellow;
  position:relative;
  top:100px;
}
.item{
  width:150px;
  left:2px;
  height:100px;
  background-color:red;
  margin:10px;
  text-align:center;
}

＆＃13;

<div class="addProducts">
  <div class="productHolder">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</div>

＆＃13;

所以基本上我必须克隆当前div（.item）并将其附加到div .addProducts的右上角，依此类推，.items应该一个接一个地复制就像他们现在，但在另一个div。

此外，我必须在动画中显示它

我创造了一个小提琴，让你的事情变得更快

JSFiddle

Answer 1

使用DOM API

使用Document.querySelector()选择.productHolder

将Node.onclick事件处理程序应用于所选的Node。

检查clicked element是否有班级item。

使用Node.cloneNode(true)克隆节点及其内容

使用Element.style来应用相关的样式

使用Node.insertBefore()将克隆的元素添加到.add-products

中

你已经完成了！

（Demo）

document.querySelector('.productHolder').onclick = function(e) {
    if(e.target.className === 'item') {
        var clone = e.target.cloneNode(true);
        clone.style.float = 'right';
        clone.style.clear = 'both';
        this.parentNode.insertBefore(clone, this);
    }
}

Answer 2

将当前div克隆到下一个容器，试试这个fiddle。

$('.productHolder .item').on('click',function(){   
    var cloneX = $(this).remove().addClass('new').clone();
    $(cloneX).appendTo('.productHolder2')   
    $('.new').animate({
         opacity: 0.25 //use more parameter for effect
    }, 1000)
});

如何将div的副本从当前位置设置为右上角

2 个答案:

使用DOM API