2

JavaScriptを学び始めたばかりです。
私は問題があります。私は次のことをしようとしています：

私は2つの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つのボタン（要素など）を表示したいと思います。それらの1つ（上、下）をクリックすると、それらが割り当てられている適切な要素が1つ上または下にシフトします。UPDOWN[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 に答える