fork download 
  1.  
  2. (function () {
  3.   var mainElement = document.querySelector('.map__pin--main');
  4.   var field = document.querySelector('.map__overlay');
  5.  
  6.   var limits = {
  7.     top: minLocalY - pinHight,
  8.     right: field.offsetWidth + field.offsetLeft,
  9.     bottom: maxLocalY,
  10.     left: field.offsetLeft
  11.   };
  12.   mainElement.addEventListener('mousedown', function (evt) {
  13.     evt.preventDefault();
  14.  
  15.     var startCoords = {
  16.       x: evt.clientX,
  17.       y: evt.clientY
  18.     };
  19.  
  20.     var dragged = false;
  21.  
  22.     var onMouseMove = function (moveEvt) {
  23.       moveEvt.preventDefault();
  24.       dragged = true;
  25.  
  26.       var shift = {
  27.         x: startCoords.x - moveEvt.clientX,
  28.         y: startCoords.y - moveEvt.clientY
  29.       };
  30.  
  31.       startCoords = {
  32.         x: moveEvt.clientX,
  33.         y: moveEvt.clientY
  34.       };
  35.       if (!(parseInt(mainElement.style.left, 10) >= limits.left- pinWidth)) {
  36.         mainElement.style.left = limits.left + 'px';
  37.         document.querySelector('#address').value = (parseInt(mainElement.style.left, 10)  ) + ' ' + (parseInt(mainElement.style.top, 10) + pinHight);
  38.       } else if (!(parseInt(mainElement.style.left, 10) >= limits.right - pinWidth)) {
  39.         mainElement.style.left = limits.right - pinWidth + 'px';
  40.         document.querySelector('#address').value = (parseInt(mainElement.style.left, 10)  ) + ' ' + (parseInt(mainElement.style.top, 10) + pinHight);
  41.       } else if (!(parseInt(mainElement.style.top, 10) <= limits.top)) {
  42.         mainElement.style.top = limits.top + 'px';
  43.         document.querySelector('#address').value = (parseInt(mainElement.style.left, 10)  ) + ' ' + (parseInt(mainElement.style.top, 10) + pinHight);
  44.       } else if (!(parseInt(mainElement.style.top, 10) >= limits.bottom)) {
  45.         mainElement.style.top = limits.bottom + 'px';
  46.         document.querySelector('#address').value = (parseInt(mainElement.style.left, 10)  ) + ' ' + (parseInt(mainElement.style.top, 10) + pinHight);
  47.       }
  48.       mainElement.style.top = (mainElement.offsetTop - shift.y) + 'px';
  49.       mainElement.style.left = (mainElement.offsetLeft - shift.x) + 'px';
  50.       document.querySelector('#address').value = (parseInt(mainElement.style.left, 10)  ) + ' ' + (parseInt(mainElement.style.top, 10) + pinHight);
  51.  
  52.     };
  53.  
  54.     var onMouseUp = function (upEvt) {
  55.       upEvt.preventDefault();
  56.  
  57.       document.removeEventListener('mousemove', onMouseMove);
  58.       document.removeEventListener('mouseup', onMouseUp);
  59.  
  60.       if (dragged) {
  61.         var onClickPreventDefault = function (evte) {
  62.           evte.preventDefault();
  63.           mainElement.removeEventListener('click', onClickPreventDefault);
  64.         };
  65.         mainElement.addEventListener('click', onClickPreventDefault);
  66.       }
  67.  
  68.     };
  69.  
  70.     document.addEventListener('mousemove', onMouseMove);
  71.     document.addEventListener('mouseup', onMouseUp);
  72.   });
  73.  
  74. })();
Runtime error #stdin #stdout #stderr 0s 171392KB
comments (?)
stdin 
Standard input is empty
stdout 
Standard output is empty
stderr 
prog.js:3:0 ReferenceError: document is not defined
https://ideone.com/JUCVz0
language:
JavaScript (SMonkey 60.2.3)
created:
5 years ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!