Javascript 如何操作从一个div结转到另一个空div的列表项

我刚开始学习JavaScript。
我有个问题。我正在努力做到以下几点：

我有两个div。左侧填充有列表

.php代码

<ul class="master">
    <?php foreach ($zabiegi as $zabieg): 
        echo '<button class="down" style="display: none;">Down</button>'.'<li>'.$zabieg['nazwa'].'</li>'.'<button class="up" style="display: none;">Up</button>';
    endforeach; ?>
</ul>

html

向下
首先
向上
向下
第二
向上
向下
第三
向上

而且是空的。我试图达到以下效果。单击左侧

div

元素时，将项目复制到右侧

div

。 然后，当单击复制到右侧

div

的项目时，我想显示两个按钮（元素，无论什么），称为

up

，

DOWN

（我应该看起来像

[DOWN][Li][up]

）。当您单击其中一个（向上、向下）时，分配给它们的适当元素将移动一个 向上或向下定位

我不想使用Dragable（jQueryUI），我希望在简单单击的基础上执行此任务

---

非常感谢您的帮助。

请在下面找到一个非常粗糙但有效的示例，如果您决定使用基于此的东西，您将能够清理它，谢谢

你也可以看到它在这里工作

弗斯特
向上的
向下


第二
向上的
向下


第三
向上的
向下


（功能（）{
//拿到保险单
var ul=document.getElementById（'master'）；
//删除
之间的空白
//因此，eg element.previousSibling始终引用
//对一个
而不是对一个
for（var i=0，child=null；i
if（child.nodeType！==1）{
//移除它
ul.移除儿童（儿童）；
}
}
函数向上移动（li）{
//如果李连杰还没有达到顶峰的话
如果（li！==ul.第一个孩子）{
//把它调高一点
ul.插入前（li，li.以前的兄弟姐妹）；
}
}
函数向下移动（li）{
//如果li还没有在底部的话
如果（li！==ul.lastChild）{
//把它下面的li向上移动1，把我们向下移动
上移（li.下移）；
}
}
//倾听点击声
ul.addEventListener（'click'，函数（e）{
//单击的元素
var el=e.target；
//这是class=“”
var elType=el.className；
//class=“up”的任何元素
var isUpButton=elType.search（/\bup\b/）！=-1；
//class=“down”的任何元素
var isDownButton=elType.search（/\bdown\b/）！=-1；
如果（isUpButton）{
向上移动（el.parentNode）；
}
如果（IsDown按钮）{
向下移动（el.parentNode）；
}
});
}());

只是一个旁注，

按钮

元素应该包含在

li

中，因为

ul

中只允许

li

。请看这里的问题：我没有使用您的JavaScript代码，但您在HTML代码方面帮了我很多。。。谢谢你的主意

<ul class="master">
    <li><button class="down" style="display: none;">Down</button></li>
    <li>First</li>
    <li><button class="up" style="display: none;">Up</button></li>
    <li><button class="down" style="display: none;">Down</button></li>
    <li>Second</li>
    <li><button class="up" style="display: none;">Up</button></li>
    <li><button class="down" style="display: none;">Down</button></li>
    <li>Third</li>
    <li><button class="up" style="display: none;">Up</button></li>
</ul>

<ul id="master">
  <li>
    First
    <button class="up">Up</button>
    <button class="down">Down</button>
  </li>
  <li>
    Second
    <button class="up">Up</button>
    <button class="down">Down</button>
  </li>
  <li>
    Third
    <button class="up">Up</button>
    <button class="down">Down</button>
  </li>
</ul>

<script>
(function() {

  // get the UL
  var ul = document.getElementById('master');

  // remove whitespace from in-between the <li>s
  // so that eg element.previousSibling always refers
  // to an <li> and not to eg "    "
  for(var i = 0, child = null; i < ul.childNodes.length; i++) {
    // get each child
    child = ul.childNodes[i];
    // if it's not an element, like an <li>
    if(child.nodeType !== 1) {
      // remove it
      ul.removeChild(child);
    }
  }

  function moveUp(li) {
    // if the li isn't already at the top
    if(li !== ul.firstChild) {
      // move it up one
      ul.insertBefore(li, li.previousSibling);
    }
  }

  function moveDown(li) {
    // if the li isn't already at the bottom
    if(li !== ul.lastChild) {
      // move the li below it up by one, moving us down
      moveUp(li.nextSibling);
    }
  }

  // listen for clicks
  ul.addEventListener('click', function(e) {
    // the clicked element
    var el = e.target;
    // it's class=""
    var elType = el.className;
    // any element with class="up"
    var isUpButton = elType.search(/\bup\b/) !== -1;
    // any element with class="down"
    var isDownButton = elType.search(/\bdown\b/) !== -1;

    if(isUpButton) {
      moveUp(el.parentNode);
    }
    if(isDownButton) {
      moveDown(el.parentNode);
    }
  });
}());
</script>