Drag and drop functionality using interact.js

Question

I've tried to run the interact.js drag and drop method as in the example itself. I downloaded the interact.js and interact.min.js and include them in my html file as well. But the function doesn't seem to be implemented. Any suggestions in this regard will be appreciated. I've provided the jsFiddle for the code in context below

    /**
     * Created by nayantara on 8/3/16.
     */

    /* The dragging code for '.draggable' from the demo above
     * applies to this demo as well so it doesn't have to be repeated. */

     // enable draggables to be dropped into this
    interact('.dropzone').dropzone({
      // only accept elements matching this CSS selector
      accept: '#yes-drop',
      // Require a 75% element overlap for a drop to be possible
      overlap: 0.75,

      // listen for drop related events:

      ondropactivate: function(event) {
        // add active dropzone feedback
        event.target.classList.add('drop-active');
      },
      ondragenter: function(event) {
        var draggableElement = event.relatedTarget,
          dropzoneElement = event.target;

        // feedback the possibility of a drop
        dropzoneElement.classList.add('drop-target');
        draggableElement.classList.add('can-drop');
        draggableElement.textContent = 'Dragged in';
      },
      ondragleave: function(event) {
        // remove the drop feedback style
        event.target.classList.remove('drop-target');
        event.relatedTarget.classList.remove('can-drop');
        event.relatedTarget.textContent = 'Dragged out';
      },
      ondrop: function(event) {
        event.relatedTarget.textContent = 'Dropped';
      },
      ondropdeactivate: function(event) {
        // remove active dropzone feedback
        event.target.classList.remove('drop-active');
        event.target.classList.remove('drop-target');
      }
    });

#outer-dropzone {
  height: 140px;
}
#inner-dropzone {
  height: 80px;
}
.dropzone {
  background-color: #ccc;
  border: dashed 4px transparent;
  border-radius: 4px;
  margin: 10px auto 30px;
  padding: 10px;
  width: 80%;
  transition: background-color 0.3s;
}
.drop-active {
  border-color: #aaa;
}
.drop-target {
  background-color: #29e;
  border-color: #fff;
  border-style: solid;
}
.drag-drop {
  display: inline-block;
  min-width: 40px;
  padding: 2em 0.5em;
  color: #fff;
  background-color: #29e;
  border: solid 2px #fff;
  -webkit-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
  transition: background-color 0.3s;
}
.drag-drop.can-drop {
  color: #000;
  background-color: #4e4;
}
JS Demo only

<html>

<head>
  <script src="http://code.interactjs.io/v1.2.6/interact.js"></script>
  <script src="http://code.interactjs.io/v1.2.6/interact.min.js"></script>
</head>

<body>

  <div id="no-drop" class="draggable drag-drop">#no-drop</div>

  <div id="yes-drop" class="draggable drag-drop">#yes-drop</div>

  <div id="outer-dropzone" class="dropzone">
    #outer-dropzone
    <div id="inner-dropzone" class="dropzone">#inner-dropzone</div>
  </div>


</body>

</html>

Nayantara Jeyaraj · Accepted Answer · 2016-08-03 10:43:43Z

Just thought of posting the working version

// target elements with the "draggable" class
interact('.draggable')
  .draggable({
    // enable inertial throwing
    inertia: true,
    // keep the element within the area of it's parent
    restrict: {
      restriction: "parent",
      endOnly: true,
      elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
    },
    // enable autoScroll
    autoScroll: true,

    // call this function on every dragmove event
    onmove: dragMoveListener,
    // call this function on every dragend event
    onend: function (event) {
      var textEl = event.target.querySelector('p');

      textEl && (textEl.textContent =
        'moved a distance of '
        + (Math.sqrt(event.dx * event.dx +
                     event.dy * event.dy)|0) + 'px');
    }
  });

  function dragMoveListener (event) {
    var target = event.target,
        // keep the dragged position in the data-x/data-y attributes
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    // translate the element
    target.style.webkitTransform =
    target.style.transform =
      'translate(' + x + 'px, ' + y + 'px)';

    // update the posiion attributes
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  }

  // this is used later in the resizing and gesture demos
  window.dragMoveListener = dragMoveListener;

// enable draggables to be dropped into this
interact('.dropzone').dropzone({
  // only accept elements matching this CSS selector
  accept: '#yes-drop',
  // Require a 75% element overlap for a drop to be possible
  overlap: 0.75,

  // listen for drop related events:

  ondropactivate: function (event) {
    // add active dropzone feedback
    event.target.classList.add('drop-active');
  },
  ondragenter: function (event) {
    var draggableElement = event.relatedTarget,
        dropzoneElement = event.target;

    // feedback the possibility of a drop
    dropzoneElement.classList.add('drop-target');
    draggableElement.classList.add('can-drop');
    draggableElement.textContent = 'Dragged in';
  },
  ondragleave: function (event) {
    // remove the drop feedback style
    event.target.classList.remove('drop-target');
    event.relatedTarget.classList.remove('can-drop');
    event.relatedTarget.textContent = 'Dragged out';
  },
  ondrop: function (event) {
    event.relatedTarget.textContent = 'Dropped';
  },
  ondropdeactivate: function (event) {
    // remove active dropzone feedback
    event.target.classList.remove('drop-active');
    event.target.classList.remove('drop-target');
  }
});

#outer-dropzone {
  height: 140px;
}

#inner-dropzone {
  height: 80px;
}

.dropzone {
  background-color: #ccc;
  border: dashed 4px transparent;
  border-radius: 4px;
  margin: 10px auto 30px;
  padding: 10px;
  width: 80%;
  transition: background-color 0.3s;
}

.drop-active {
  border-color: #aaa;
}

.drop-target {
  background-color: #29e;
  border-color: #fff;
  border-style: solid;
}

.drag-drop {
  display: inline-block;
  min-width: 40px;
  padding: 2em 0.5em;

  color: #fff;
  background-color: #29e;
  border: solid 2px #fff;

  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);

  transition: background-color 0.3s;
}

.drag-drop.can-drop {
  color: #000;
  background-color: #4e4;
}

<script src="http://code.interactjs.io/v1.2.6/interact.js"></script>


<div id="no-drop" class="draggable drag-drop"> #no-drop </div>

<div id="yes-drop" class="draggable drag-drop"> #yes-drop </div>

<div id="outer-dropzone" class="dropzone">
  #outer-dropzone
  <div id="inner-dropzone" class="dropzone">#inner-dropzone</div>
 </div>

Klotor · Accepted Answer · 2016-08-03 09:57:30Z

2

The JS you posted is the code for dropzone handling only, you also need to add the piece from first example on the page you linked to be able to drag.

answered Aug 3, 2016 at 9:57

Klotor

1818 bronze badges

4 Comments

Nayantara Jeyaraj Over a year ago

Thanks on the feedback. Do you mind showing a jsFiddle version of this

Klotor Over a year ago

Seeing that you didn't change much in the examples, just copy the first example's JS to your current code and it will work. :)

Klotor Over a year ago

Also, you don't neet to include both of the interact.js files, should be enough to just leave the minified version in.

Nayantara Jeyaraj Over a year ago

Thanks a million for your assistance

Collectives™ on Stack Overflow

Drag and drop functionality using interact.js

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related