{"size": 1482, "ext": "js", "max_stars_repo_path": "webapp/src/directives/draggable.js", "max_stars_repo_name": "CristiDospra/duel-masters", "max_stars_repo_stars_event_min_datetime": "2019-09-01T22:17:26.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-05T11:44:12.000Z", "max_issues_repo_path": "webapp/src/directives/draggable.js", "max_issues_repo_name": "CristiDospra/duel-masters", "max_issues_repo_issues_event_min_datetime": "2019-09-02T09:03:21.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-27T04:11:04.000Z", "max_forks_repo_path": "webapp/src/directives/draggable.js", "max_forks_repo_name": "CristiDospra/duel-masters", "max_forks_repo_forks_event_min_datetime": "2020-06-08T17:55:43.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-31T17:48:23.000Z"}
{"max_stars_count": 17, "max_issues_count": 29, "max_forks_count": 9, "avg_line_length": 21.7941176471, "max_line_length": 73, "alphanum_fraction": 0.6727395412}
import Vue from "vue";

let isDragging = false;
let mouseDown = false;
let currentlyDragging;
let lastMovePos = { x: 0, y: 0 };

let onMouseDown = function(event, el) {
  lastMovePos.x = event.clientX;
  lastMovePos.y = event.clientY;
  currentlyDragging = el;
  mouseDown = true;
};

let onMouseUp = function() {
  isDragging = false;
  mouseDown = false;
};

let onMouseMove = function(event) {
  if (!mouseDown) return;

  if (!isDragging) {
    isDragging = true;
    return;
  }

  let container = document.getElementById(currentlyDragging.dataset.ref);

  let posX = lastMovePos.x - event.clientX;
  let posY = lastMovePos.y - event.clientY;
  lastMovePos.x = event.clientX;
  lastMovePos.y = event.clientY;

  let newX = container.offsetLeft - posX;
  let newY = container.offsetTop - posY;

  if (newX < 0) {
    newX = 0;
  }

  if (newX + container.offsetWidth > document.body.clientWidth) {
    newX = document.body.clientWidth - container.offsetWidth;
  }

  if (newY < 0) {
    newY = 0;
  }

  if (newY + container.offsetHeight > document.body.clientHeight) {
    newY = document.body.clientHeight - container.offsetHeight;
  }

  container.style.left = newX + "px";
  container.style.top = newY + "px";
};

document.addEventListener("mousemove", onMouseMove.bind(this));
document.addEventListener("mouseup", onMouseUp);

Vue.directive("draggable", {
  bind: function(el) {
    el.addEventListener("mousedown", event => {
      onMouseDown(event, el);
    });
  }
});
