1

I'm trying dragula https://github.com/bevacqua/dragula in chrome, i could not get it worked , any additional code needed to get it work ?

here is the code

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

did i miss something ?

2

1 Answer 1

4

Looks like your script is running too soon, before the elements it wants to target are rendered.

Change your script tag in the head to:

window.onload = function() {
    dragula([document.getElementById('left1'), document.getElementById('right1')]);
}
1
  • 4
    Hah, never forget to think about whether your JavaScript is trying to do stuff to things that don't exist (yet). Commented Aug 5, 2015 at 12:19

Not the answer you're looking for? Browse other questions tagged or ask your own question.