javascript - 在无序列表中移动并更改其中列表项的位置

标签 javascript css events

我正在构建一个小型应用程序,可让您浏览 3d 风格的名片。 基本上,我有一个无序列表,包含 10 个列表项。每次我按下左边的向下箭头,我想删除第一个

  • (前面的那个)并将它推到后面(所以它成为最后一个
  • 在列表中)。

    此外,由于除了第一个元素之外的所有元素都具有负的 transformZ 值以将它们推回,我想重新排列它们以便在每次按下向下按钮时它们更接近用户。现在他们每个人都有一个 80*i 的 transformZ 值,我不知道如何在不弄乱相同布局的情况下插入他们。

    我试过做类似的事情,但不幸的是它没有成功:

    btnDown.addEventListener('click', function() {
            listItems[0].parentNode.removeChild(listItems[0]);
            for (i=0; i<=listItems.length-1;i++) {
                list.style.webkitTransform = "rotateX(0deg) translateZ(-" + (100*i) + "px)";    
            }
    

    }, 假);

    您还可以在这里找到完整的元素: http://codepen.io/gbnikolov/pen/cbdwl

    提前致谢,非常感谢所有帮助!

  • 最佳答案

    btnDown.addEventListener('click', function() {  
      listItems[0].parentNode.appendChild(listItems[0]);
      // re-index list
      listItems = document.querySelectorAll('#primary ul li')
      for (i=0; i<=listItems.length-1; i++) {
        listItems[i].style.webkitTransform = "rotateX(0deg) translateZ(-" + (80*i) + "px) translateY(-" + i*20 + "px)";
      }
    }, false);
    

    你很接近。不是删除元素,而是将其移动到节点的末尾。然后重新应用 webkitTransform。

    btnUp.addEventListener('click', function() {  
     var lastItem = listItems[listItems.length-1]
      listItems[0].parentNode.insertBefore(lastItem, listItems[0]);
      listItems = document.querySelectorAll('#primary ul li');
      applyWebkitTransform();
    }, false);
    

    对于向上按钮,使用 insertBefore() 函数。请参阅:http://codepen.io/anon/pen/cAbKI

    关于javascript - 在无序列表中移动并更改其中列表项的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24505112/

    相关文章:

    javascript - 如何在 Dojo StackContainer 中禁用热键

    javascript - AngularJs - 错误 : 10 $digest() iterations reached. 中止

    html - Internet Explorer 中的字段集图例

    java - 我可以在 firePropertyChange() 启动的事件中传递信息字符串吗?

    javascript - 对象解构花括号内的等号

    javascript - Extjs 3.x : Can I make a panel or a container movable?

    javascript - 让二级子菜单与主导航齐平

    html - 协助垂直导航

    android - Android 可以处理不规则形状的事件吗?

    javascript - 车轮事件 PreventDefault 不取消车轮事件