1

クロムでドラグラhttps://github.com/bevacqua/dragulaを試していますが、機能させることができませんでした。機能させるために追加のコードが必要ですか?

ここにコードがあります

<!DOCTYPE html>

<html>
  <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="dragula.css" rel="stylesheet" type="text/css"/>
    <style>

      .wrapper div div{
        background: #FCE8FB;
        margin: 12px 6px 12px 2px;
      }

    </style>
    <script src="dragula.min.js" type="text/javascript"></script>
    <script>
      dragula([document.getElementById('left1'), document.getElementById('right1')]);
    </script>
  </head>
  <body>

    <div class='wrapper' style="  border: black 3px solid;">
      <div id='left1' class='container' style="  border: black 1px solid;">
        <div>You can move these elements between these two containers</div>
        <div>Moving them anywhere else isn't quite possible</div>
        <div>There's also the possibility of moving elements around in the same container, changing their position</div>
      </div>
      <div id='right1' class='container' style="  border: black 1px solid;">
        <div>This is the default use case. You only need to specify the containers you want to use</div>
        <div>More interactive use cases lie ahead</div>
        <div>Make sure to check out the <a href='https://github.com/bevacqua/dragula#readme'>documentation on GitHub!</a></div>
      </div>
    </div>

  </body>
</html>

私は何か見落としてますか ？

4

1 に答える 1

3

対象とする要素がレンダリングされる前に、スクリプトの実行が早すぎるようです。

head 内の script タグを次のように変更します。

window.onload = function() {
    dragula([document.getElementById('left1'), document.getElementById('right1')]);
}
于 2015-08-05T12:10:29.357 に答える