Moving div on the page and dropping if div comes in another one with native JS

Question

There is this jsFiddle. If you open it you will see a moveable div, but I also want to add the following thing: if you move this div to 'trash', that moveable div must disappear (you put it in trash). Thanks in advance!

My code for div moving:

var selected = null, // Object of the element to be moved
    x_pos = 0, y_pos = 0, // Stores x & y coordinates of the mouse pointer
    x_elem = 0, y_elem = 0; // Stores top, left values (edge) of the element

// Will be called when user starts dragging an element
function _drag_init(elem) {
    // Store the object of the element which needs to be moved
    selected = elem;
    x_elem = x_pos - selected.offsetLeft;
    y_elem = y_pos - selected.offsetTop;
}

// Will be called when user dragging an element
function _move_elem(e) {
    x_pos = document.all ? window.event.clientX : e.pageX;
    y_pos = document.all ? window.event.clientY : e.pageY;
    if (selected !== null) {
        selected.style.left = (x_pos - x_elem) + 'px';
        selected.style.top = (y_pos - y_elem) + 'px';
    }
}

// Destroy the object when we are done
function _destroy() {
    selected = null;
}

// Bind the functions...
document.getElementById('draggable-element').onmousedown = function () {
    _drag_init(this);
    return false;
};

document.onmousemove = _move_elem;
document.onmouseup = _destroy;

When do you want it to be removed? When the cursor is over the "trash" div or when the two divs overlap? — PostCrafter, Apr 06 '16 at 11:10

dimshik · Answer 1 · 2016-04-06T11:31:45.587

Here is a quick (not full) implementation of what you asked.

https://jsfiddle.net/dimshik/posm3cwk/4/

I created an function isInTrash(element) that gets an element and returns true if it is in the trash.

The check i did was if the mouse pointer that holds the draggable element is located inside the trash area.

You should also add some kind of a feedback to the user when the element is overlapping the trash while dragging.

you can call the isInTrash function inside your function _move_elem(e) and change the color for example of the draggable element.

Here is the additional functionality of the feedback

https://jsfiddle.net/dimshik/posm3cwk/5/

score 0 · Answer 2 · edited May 23 '17 at 12:25

Trash the div if it has more than 50% area in trash

Find x, y co-ordinates of trash and dragged elements
Find overlapped area between them
If the area is more than half of div area , hide it

Code

function getOffset(el) {
  var _x = 0;
  var _y = 0;
  while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
    _x += el.offsetLeft - el.scrollLeft;
    _y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }
  return {
    top: _y,
    left: _x
  };
}

function shouldTrash() {
  var dragged = getOffset(document.getElementById('draggable-element'));
  var x11 = dragged.left;
  var x12 = dragged.left + 100;
  var y11 = dragged.top;
  var y12 = dragged.top + 100;
  var trashed = getOffset(document.getElementById('trash'));
  var x21 = trashed.left;
  var x22 = x21 + 100;
  var y21 = trashed.top;
  var y22 = y21 + 100;
  x_overlap = Math.max(0, Math.min(x12, x22) - Math.max(x11, x21));
  y_overlap = Math.max(0, Math.min(y12, y22) - Math.max(y11, y21));
  overlapArea = x_overlap * y_overlap;
  if (overlapArea > 100 * 50) {
    document.getElementById('draggable-element').style.display = 'none';
  }
}

Implemented here

References :

Retrieve co-ordinates

Find overlapped area

score 0 · Answer 3 · edited May 23 '17 at 11:46

For a working solution check my modification of your jsFiddle

In order to solve the problem, I have taken the overlap function suggested in this answer which uses Element.getBoundingClientRect()

function checkOverlap(element1, element2) {
    var rect1 = element1.getBoundingClientRect();
    var rect2 = element2.getBoundingClientRect();
    return !(rect1.right < rect2.left || 
                rect1.left > rect2.right || 
                rect1.bottom < rect2.top || 
                rect1.top > rect2.bottom)
}

// Destroy the object when we are done
function _destroy() {
    // check if an element is currently selected
    if (selected) {
        // check if the selected item overlaps the trash element
        if (checkOverlap(selected, document.getElementById('trash'))) {
            // remove the selected item from the DOM
            selected.parentElement.removeChild(selected);
        }
    }
    selected = null;
}

Moving div on the page and dropping if div comes in another one with native JS

3 Answers3