We Keep Coding

Javascript Interactjs - Delete div item on drop in dropzone

Using interactjs I'm trying to delete an item when being dropped in the dropzone that serves as bin. The tricky part here is that the dropzone must be in position:fixed and initially the draggable item is in position:relative. I think this causes the dropzone not to be able to detect when something is being dropped when the draggable is in a different position. I tried to fix this by changing position:absolute to draggable when item is being dragged(on.dragmove) but inevitably, the draggable overlaps the dropzone. How do I make this work?
/**
*
*
* ineracjs
* drag and drop
*
*
*/
function interactJs(){
var element = document.querySelector('.draggable');
var x = 0; var y = 0
interact(element)
.resizable({
// resize from all edges and corners
edges: { left: true, right: true, bottom: true, top: true },
listeners: {
move (event) {
var target = event.target
var x = (parseFloat(target.getAttribute('data-x')) || 0)
var y = (parseFloat(target.getAttribute('data-y')) || 0)
// update the element's style
target.style.width = event.rect.width + 'px'
target.style.height = event.rect.height + 'px'
// translate when resizing from top or left edges
x += event.deltaRect.left
y += event.deltaRect.top
target.style.transform = 'translate(' + x + 'px,' + y + 'px)'
target.setAttribute('data-x', x)
target.setAttribute('data-y', y)
target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height)
}
},
modifiers: [
// keep the edges inside the parent
interact.modifiers.restrictEdges({
outer: 'parent'
}),
// minimum size
interact.modifiers.restrictSize({
min: { width: 100, height: 50 }
})
],
inertia: true
})
.draggable({
modifiers: [
interact.modifiers.snap({
targets: [
interact.snappers.grid({ x: 30, y: 30 })
],
range: Infinity,
relativePoints: [ { x: 0, y: 0 } ]
}),
interact.modifiers.restrict({
restriction: element.parentNode,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 },
endOnly: true
})
],
inertia: true
})
.on('dragmove', function (event) {
x += event.dx
y += event.dy
event.target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
event.target.style.position = 'absolute';//change position to absolute to match same level position as bin?
})
/**
*
*
* delete
* dropzone
*
*/
var bin = document.querySelector('.element-trash');
interact(bin)
.dropzone({
accept: '.draggable',
// Require a 75% element overlap for a drop to be possible
overlap: 0.75,
ondrop: function (event) {
$(event.target).remove();// remove from DOM
console.log(event.target);
}
})
.on('dropactivate', function (event) {
event.target.classList.add('drop-activated')
})
}interactJs();
.element-trash{
height: 100%;
color: black;
background: gold;
padding: 1%;
width: 120px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
transition: 0.5s;
/* padding-top: 60px; */
}
#main{
padding: 0px !important;
margin-left: 120px;
}
#main{
background-color: #eceef0;
}
#main {
transition: margin-left .5s;
height: 100% !important;
/*padding: 16px;*/
}
.draggable {
width: 10%;
min-height: 6.5em;
background-color: #29e !important;
color: white;
border-radius: 0.75em;
padding: 4%;
touch-action: none;
user-select: none;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--ineractjs-->
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<div class='element-trash'>Drop to delete</div>
<div id='main'>
<div class='draggable'>Drag me</div>
</div>

For the dropzone to work, you need to have all required functions that I was obviously missing in my original post. Major brain fart.
functions
ondropactivate
ondragenter
ondragleave
ondrop
ondropdeactivate
working codes
/**
*
*
* ineracjs
* drag and drop
*
*
*/
var element = document.querySelector('.draggable');
var x = 0; var y = 0
interact(element)
.resizable({
// resize from all edges and corners
edges: { left: true, right: true, bottom: true, top: true },
listeners: {
move (event) {
var target = event.target
var x = (parseFloat(target.getAttribute('data-x')) || 0)
var y = (parseFloat(target.getAttribute('data-y')) || 0)
// update the element's style
target.style.width = event.rect.width + 'px'
target.style.height = event.rect.height + 'px'
// translate when resizing from top or left edges
x += event.deltaRect.left
y += event.deltaRect.top
target.style.transform = 'translate(' + x + 'px,' + y + 'px)'
target.setAttribute('data-x', x)
target.setAttribute('data-y', y)
target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height)
}
},
modifiers: [
// keep the edges inside the parent
interact.modifiers.restrictEdges({
outer: 'parent'
}),
// minimum size
interact.modifiers.restrictSize({
min: { width: 100, height: 50 }
})
],
inertia: true
})
.draggable({
modifiers: [
interact.modifiers.snap({
targets: [
interact.snappers.grid({ x: 30, y: 30 })
],
range: Infinity,
relativePoints: [ { x: 0, y: 0 } ]
}),
interact.modifiers.restrict({
restriction: element.parentNode,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 },
endOnly: true
})
],
inertia: true
})
.on('dragmove', function (event) {
x += event.dx
y += event.dy
event.target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
event.target.style.position = 'absolute';
event.target.style.zIndex = '2';
})
/**
*
*
* delete
* dropzone
*
*/
// enable draggables to be dropped into this
interact('.dropzone').dropzone({
// only accept elements matching this CSS selector
accept: '.draggable',
// Require a 75% element overlap for a drop to be possible
overlap: 0.25,
// 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
var 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) {
//when dropped delete
$(event.relatedTarget).remove();// remove from DOM
//event.relatedTarget.textContent = 'Dropped'
},
ondropdeactivate: function (event) {
// remove active dropzone feedback
event.target.classList.remove('drop-active')
event.target.classList.remove('drop-target')
}
})
.dropzone {
border: dashed 4px transparent;
border-radius: 4px;
margin: 10px auto 30px;
padding: 10px;
transition: background-color 0.3s;
}
.element-trash{
height: 100%;
color: black;
background: gold;
padding: 1%;
width: 120px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
transition: 0.5s;
/* padding-top: 60px; */
}
.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;
margin: 1rem 0 0 1rem;
color: #fff;
background-color: #29e;
border: solid 2px #fff;
touch-action: none;
transform: translate(0px, 0px);
transition: background-color 0.3s;
}
.drag-drop.can-drop {
color: #000;
background-color: #4e4;
}
.draggable {
background-color: #29e !important;
color: white;
border-radius: 0.75em;
padding: 4%;
touch-action: none;
user-select: none;
margin-left: 120px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--ineractjs-->
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<div class="dropzone element-trash">Drop to delete</div>
<div id="yes-drop" class="draggable drag-drop"> Drag Me </div>

Collision detection in nuxt.js. code is running without errors. But some functionalities not working

I am working with collision detection in vue.js using nuxt.js framework. I have done a similar program from this source
https://codepen.io/dropinks/pen/MrzPXB
I have converted this js code in vue friendly template and script. Only problem is that the the collision is not being detected . Please take a look at my code and tell where i made mistake.
Here is the link for codesandbox online editor where i have the code
https://codesandbox.io/s/wispy-hill-466s7?file=/pages/index.vue
template code:
<template>
<div class="container">
<div class="rectangle-1" id="rect">Hover Me</div>
<div class="rectangle-2" id="dragMe">Drag Me</div>
</div>
</template>
styles:
<style scoped>
container {
position: relative;
}
.rectangle-1 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #4CAF50;
width: 180px;
height: 150px;
border-radius: 5px;
transition: 0.3s all ease;
color: #fff;
text-align: center;
line-height: 150px;
font-size: 25px;
}
.rectangle-1.collide {
background: #EF5350;
}
.rectangle-1:after {
content: ":-)";
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
}
.rectangle-1.collide:after {
content: ":-(";
}
.rectangle-2 {
position: absolute;
background: #F5B041;
width: 100px;
height: 100px;
border-radius: 5px;
z-index: 10;
cursor: move;
transition: 0.5s box-shadow ease, 0.5s transform ease;
transform: translate(0, 0);
top: 40%;
left: 30%;
text-align: center;
line-height: 100px;
font-size: 17px;
}
.rectangle-2.onDrag {
box-shadow: 5px 5px 25px 0px rgba(0, 0, 0, 0.2);
transform: translate(-3px, -3px);
}
</style>
script
<script>
export default {
data() {
return {
dragMe: "",
rect: "",
};
},
created: function () {
if (process.client) {
this.myFunction();
}
},
methods: {
myFunction: function () {
this.rect = document.getElementById("rect");
this.dragMe = document.getElementById("dragMe");
this.initDrag({
element: this.dragMe,
drag: function () {
this.isCollapsed(this.dragMe, this.rect);
},
});
},
isCollapsed: function (dragMe, rect) {
var object_1 = this.dragMe.getBoundingClientRect();
var object_2 = this.rect.getBoundingClientRect();
if (
object_1.left < object_2.left + object_2.width &&
object_1.left + object_1.width > object_2.left &&
object_1.top < object_2.top + object_2.height &&
object_1.top + object_1.height > object_2.top
) {
rect.classList.add("collide");
document.getElementById('dragMe').style.background = 'blue';
} else {
rect.classList.remove("collide");
}
},
initDrag: function (options) {
var element = options.element;
var mousedown,
mouseup,
mousemove,
dragStart,
initX,
initY,
offsetLeft,
offsetTop;
function mouseMove(ev) {
if (dragStart) {
var newX = offsetLeft + (ev.pageX - initX);
var newY = offsetTop + (ev.pageY - initY);
element.style.top = newY + "px";
element.style.left = newX + "px";
options.drag.call();
}
}
function mouseUp(ev) {
dragStart = false;
document.removeEventListener("mousemove", mouseMove, false);
document.removeEventListener("mouseup", mouseUp, false);
options.stop.call();
}
function mouseDown(ev) {
initX = ev.pageX;
initY = ev.pageY;
dragStart = true;
offsetLeft = element.offsetLeft;
offsetTop = element.offsetTop;
document.addEventListener(
"mousemove",
function (ev) {
mouseMove(ev);
},
false
);
document.addEventListener(
"mouseup",
function (ev) {
mouseUp(ev);
},
false
);
options.start.call();
}
element.addEventListener(
"mousedown",
function (ev) {
mouseDown(ev);
},
false
);
},
},
};
</script>

Attach to cursor then return to original position

I'm trying to make it so that when hovering over a div, the child of that div attaches to the cursor and when you leave the div, the child returns to its original position.
Here's what I have so far:
$('div').each(function() {
var img = $(this).find( "figure" );
var offset = img.offset();
var originLeft = offset.left;
var originTop = offset.top;
$('div').mousemove(function(e) {
img.addClass('active');
img.css({
transform: 'translateX(' + (e.pageX - originLeft/2 ) + 'px) translateY(' + (e.pageY - originTop) + 'px)'
});
}).mouseleave(function() {
img.removeClass('active');
img.css({
transform: 'translateX(0) translateY(0)'
});
});
});
div {
height: 250px;
width: 250px;
background: #eee;
}
div:nth-child(2) {
background: #ccc;
}
figure {
display: block;
height: 50px;
width: 50px;
background: blue;
margin: 0;
transition: transform 500ms ease;
}
.active {
transition: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<figure></figure>
</div>
<div>
<figure></figure>
</div>
The problems are, it doesn't work if there is more than one of them on the page, and also, the mouseleave event seems buggy: sometimes it takes a second or there is some flickering before it returns to the original position.

Using mouseenter to add the mousemove listener and removing it in the mouseleave solves most of the issue. The other part is that if the image is directly under the mouse when it leaves the container, the mouse is still on top of a child .
Adding some additional offset to the image position relative to mouse helps remove the rest of the bugginess
$('div').on('mouseenter', function() {
var img = $(this).find("figure");
var offset = img.offset();
var originLeft = offset.left;
var originTop = offset.top;
// only listen to move on this instance
$(this).mousemove(function(e) {
img.addClass('active').css({
transform: 'translateX(' + (e.pageX - originLeft / 2) + 'px) translateY(' + (e.pageY+10 - originTop) + 'px)'
});
})
}).on('mouseleave', function() {
// remove the mousemove listener
$(this).off('mousemove').find("figure").removeClass('active').css({
transform: 'translateX(0) translateY(0)'
});
});
div {
height: 150px;
width: 150px;
background: #eee;
margin-bottom: 30px
}
div:nth-child(2) {
background: #ccc;
}
figure {
display: block;
height: 50px;
width: 50px;
background: blue;
margin: 0;
transition: transform 500ms ease;
}
.active {
transition: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<figure></figure>
</div>
<div>
<figure></figure>
</div>

Your issue is in this line:
$('div').mousemove(function(e) {
Change it to:
$(this).on('mousemove', function(e) {
That because you need address the current div element on which you are in the each loop:
$('div').each(function() {
The snippet:
$('div').each(function() {
var img = $(this).find( "figure" );
var offset = img.offset();
var originLeft = offset.left;
var originTop = offset.top;
$(this).on('mousemove', function(e) {
img.addClass('active');
img.css({
transform: 'translateX(' + (e.pageX - originLeft/2 ) + 'px) translateY(' + (e.pageY - originTop) + 'px)'
});
}).on('mouseout', function(e) {
img.removeClass('active');
img.css({
transform: 'translateX(0) translateY(0)'
});
});
});
div {
height: 250px;
width: 250px;
background: #eee;
}
div:nth-child(2) {
background: #ccc;
}
figure {
display: block;
height: 50px;
width: 50px;
background: blue;
margin: 0;
transition: transform 500ms ease;
}
.active {
transition: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<figure></figure>
</div>
<div>
<figure></figure>
</div>

Stop element moving on mouse scroll using rotatable class

I am currently working on a drag-drop web application whereupon users can plan a marquee layout.
Part of the functionality is that users can rotate certain items of furniture on the canvas. However, it seems that scrolling whilst your mouse pointer is over a rotatable element will also rotate that element, which causes problems, especially if the user has got their layout perfect and then scrolls down the page to fill in a form - potentially messing up the layout.
The app uses the rotatable class from jQuery, and implements the draggable and droppable classes.
This is my javascript:
$(function() {
//Make every clone image unique.
var counts = [0];
var resizeOpts = {
handles: "all",
autoHide: true
};
var nw = $("<div>", {
class: "ui-rotatable-handle"
});
var ne = nw.clone();
var se = nw.clone();
$('.box div.ui-rotatable-handle').addClass("ui-rotatable-handle-sw");
nw.addClass("ui-rotatable-handle-nw");
ne.addClass("ui-rotatable-handle-ne");
se.addClass("ui-rotatable-handle-se");
$(".dragImg").draggable({
helper: "clone",
//Create counter
start: function() {
counts[0]++;
}
});
$("#dropHere").droppable({
drop: function(e, ui) {
if (ui.draggable.hasClass("dragImg")) {
$(this).append($(ui.helper).clone());
//Pointing to the dragImg class in dropHere and add new class.
$("#dropHere .dragImg").addClass("item-" + counts[0]);
$("#dropHere .img").addClass("imgSize-" + counts[0]);
//Remove the current class (ui-draggable and dragImg)
$("#dropHere .item-" + counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging").addClass('rotatable');
$('.rotatable').resizable().rotatable();
//$(".rotatable").append(nw, ne, se);
$(".small-table div[class*='ui-rotatable-handle-']").bind("mousedown", function(e) {
$('.rotatable').resizable().rotatable();
$('.rotatable').rotatable("instance").startRotate(e);
});
$(".item-" + counts[0]).dblclick(function() {
$(this).remove();
});
make_draggable($(".item-" + counts[0]));
$(".imgSize-" + counts[0]).resizable(resizeOpts);
}
}
});
var zIndex = 0;
function make_draggable(elements) {
elements.draggable({
containment: 'parent',
start: function(e, ui) {
ui.helper.css('z-index', ++zIndex);
},
stop: function(e, ui) {}
});
}
});
As you can see, each item that is dragged is cloned once it's dropped on the dropzone (#dropHere div) and then remains on there unless it's double clicked. I want to know, is there any way to stop the element rotating if the user scrolls their mouse over it?
EDIT: Here is a FIDDLE of the app:

Note that you just can configure you rotatable by passing parameters as and object , one of those parameters is the wheelRotate whihch set to true by default , so you've just to create an object contating this param with false value : var rotateParams = {wheelRotate:false}; and then passe the object in the rotatable() fanction as below :
$('.rotatable').resizable().rotatable(rotateParams);
Please see bellow working snippet :
//adds are commented
$(function() {
//Make every clone image unique.
var counts = [0];
var resizeOpts = {
handles: "all",
autoHide: true
};
var nw = $("<div>", {
class: "ui-rotatable-handle"
});
var ne = nw.clone();
var se = nw.clone();
$('.box div.ui-rotatable-handle').addClass("ui-rotatable-handle-sw");
nw.addClass("ui-rotatable-handle-nw");
ne.addClass("ui-rotatable-handle-ne");
se.addClass("ui-rotatable-handle-se");
$(".dragImg").draggable({
helper: "clone",
//Create counter
start: function() {
counts[0]++;
}
});
/****** adding config param ******/
var rotateParams = {
wheelRotate: false
};
/**/
$("#dropHere").droppable({
drop: function(e, ui) {
if (ui.draggable.hasClass("dragImg")) {
$(this).append($(ui.helper).clone());
//Pointing to the dragImg class in dropHere and add new class.
$("#dropHere .dragImg").addClass("item-" + counts[0]);
$("#dropHere .img").addClass("imgSize-" + counts[0]);
//Remove the current class (ui-draggable and dragImg)
$("#dropHere .item-" + counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging").addClass('rotatable');
/****** applying the config param ******/
$('.rotatable').resizable().rotatable(rotateParams);
//$(".rotatable").append(nw, ne, se);
$(".small-table div[class*='ui-rotatable-handle-']").bind("mousedown", function(e) {
/****** applying the config param ******/
$('.rotatable').resizable().rotatable(rotateParams);
$('.rotatable').rotatable("instance").startRotate(e);
});
$(".item-" + counts[0]).dblclick(function() {
$(this).remove();
});
make_draggable($(".item-" + counts[0]));
$(".imgSize-" + counts[0]).resizable(resizeOpts);
}
}
});
var zIndex = 0;
function make_draggable(elements) {
elements.draggable({
containment: 'parent',
start: function(e, ui) {
ui.helper.css('z-index', ++zIndex);
},
stop: function(e, ui) {}
});
}
});
#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;
color: #fff;
background-color: transparent;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
transition: background-color 0.3s;
}
.drag-drop.can-drop {}
.dragImg {
width: 50px;
height: 50px;
cursor: move;
}
.small-table {
width: 50px;
height: 50px;
cursor: move;
}
#dropHere {
width: 400px;
height: 400px;
border: dotted 1px black;
float: left;
}
.box {
border: 2px solid black;
width: 100px;
height: 100px;
background-color: green;
margin: 27px;
position: relative;
}
.ui-rotatable-handle {
background: url("https://image.ibb.co/knL4iF/1497037929_rotate_right.png");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 25px;
width: 25px;
position: absolute;
top: -10px;
left: -10px;
}
.ui-rotatable-handle-sw {
bottom: -27px;
left: -27px;
}
.ui-rotatable-handle-nw {
top: -27px;
left: -27px;
}
.ui-rotatable-handle-se {
bottom: -27px;
right: -27px;
}
.ui-rotatable-handle-ne {
top: -27px;
right: -27px;
}
.small-table {
background-image: url('https://image.ibb.co/gXCjiF/small_table.png');
background-size: contain;
}
.dance-floor {
background-image: url('https://image.ibb.co/gjHjiF/dance_floor.png');
background-size: contain;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ui.rotatable/1.1/jquery.ui.rotatable.min.js"></script>
<div class="container">
<div class="dragImg small-table"></div>
<div class="dragImg dance-floor"></div>
<div id="dropHere"></div>
</div>

Drag and drop functionality using interact.js

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>

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>

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.