2

我刚开始学习 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

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

并且是空的。我正在尝试达到以下效果。单击左侧div元素时，会将项目复制到右侧div。然后，当单击复制到右侧的项目时，div我想显示 2 个按钮（元素，等等）调用UP，DOWN（我应该看起来像[Down] [Li] [Up]）。当您单击其中一个（向上、向下）时，分配给它们的适当元素将向上或向下移动一个位置。

我不想使用可拖动（jquery-ui），我想在简单点击的基础上执行这个任务

任何帮助是极大的赞赏。

4

1 回答 1

0

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

你也可以在这里看到它工作http://jsfiddle.net/XqE3p/

<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>
于 2013-02-11T21:35:54.717 回答