0

I am trying to get a simple Dragula implementation but it is refusing to work. My code:

<head>
<link href='drag3.css' rel='stylesheet' type='text/css' />
<link href='css/dragula.css' rel='stylesheet' type='text/css' />
<script src='drag3.js'></script>
</head>

<div class="container">
  <h1>Drag & Drop</h1>
  <p>Trying out <code>dragula.js</code>. Source <a href="https://github.com/bevacqua/dragula">here</a>.</p>
  <div class="left">
    <div id="drag-elements">
      <div>Element 1</div>
      <div>Element 2</div>
      <div>Element 3</div>
    </div>

    <div id="drop-target">
    </div>
  </div>
  <div class="right">
    <div id="display">Display</div>
  </div>
</div>

<script src='js/dragula.js'></script>
<script src='js/example.min.js'></script>

Not sure what I am doing wrong, any help would be gratefully received!

The live code is here:

Dragula Implementation

davidjwest
  • 538
  • 3
  • 22

2 Answers2

0

OK so I fixed it by simply moving the 

 <script src='drag3.js'></script>

to the end of the page.

davidjwest
  • 538
  • 3
  • 22
0

Indeed :

There's a caveat to dragula. You shouldn't include it in the head of your web applications. It's bad practice to place scripts in the head, and as such dragula makes no effort to support this use case. Place dragula in the body, instead.

...according to https://github.com/bevacqua/dragula

sannine
  • 1
  • 1