CODEWITHSUNDEEP
javascriptjqueryhtml
user3287771
user3287771

Reputation: 113

javascript drag elements script problems

I am trying to follow a guide to get able to drag things on my webpage using jquery. I just don't get what I have to add from the site I am looking on. I want to use the example with the images inside a div (containment) from this guide: http://draggabilly.desandro.com/ What I have added to my script now is this:

<div id="house_wall1">
<script type="text/javascript" src="draggabilly.pkgd.min.js"></script>

            <script language="javascript">
            var elem = document.querySelector('#house_wall1');
            var draggie = new Draggabilly( elem, {
              containment: '#house_wall1';
            });
            </script>
            <img src="xxx" class="draggie" style="position:relative;">
        </div>

I really feel like I need to add more, but I am not so much into javascript and jquery so I can't really know how much is needed since much function is in the jquery. Nothing happens when the image is dragged now, in fact it can't be dragged. Does anyone have any idea of what I shall add more to make it work like the one I wanted? Thanks in advance.

Upvotes: 0

Views: 167

Answers (1)

Jens Cocquyt
Jens Cocquyt

Reputation: 325

Try this:

  <div id="house_wall1">
    <img src="xxx" class="draggie" style="position:relative;">
  </div>
  <script type="text/javascript" src="draggabilly.pkgd.min.js"></script>
  <script>
    ( function() {
      var container = document.querySelector('#house_wall1');
      var elems = container.querySelectorAll('.draggie');
      for ( var i=0, len = elems.length; i < len; i++ ) {
        var elem = elems[i];
        new Draggabilly( elem, {
      containment: true
      });
     }
   })();
 </script>

Upvotes: 1

Related Questions