Question

我正在尝试chrome中的dragula 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>

我错过了什么吗？

Answer 1

在呈现要展示的元素之前，看起来您的脚本运行得太快了。

将头部的脚本标记更改为：

window.onload = function() {
    dragula([document.getElementById('left1'), document.getElementById('right1')]);
}

拖拉不拖

1 个答案: