draggin.js
// Main logic, called when the mouse is clicked

Main logic, called when the mouse is clicked
Main logic called when the mouse is clicked
function drag(event) {
      if(!event.target.classList.contains("text")){
          editing = false;
          if(editing){
            editedText.blur();
          }
      }
      if(!editing){
          event.preventDefault();
          moving = true;
          z = z+1;
          tgt = event.target;
          tgt.attributeName = 'test';
          b = tgt.getBoundingClientRect();
          var x = b.left + window.pageXOffset;
          var y = b.top + window.pageYOffset;
          offsetX = event.pageX || event.changedTouches[0].pageX;
          offsetY = event.pageY || event.changedTouches[0].pageY;
          document.addEventListener('mousemove',function(e) {
            if(moving === true){
              var dx = e.pageX - offsetX + x - tgt.initialOffsetX;
              var dy = e.pageY - offsetY + y - tgt.initialOffsetY;
              var position = 'transform: translate('+dx+'px, '+dy+'px);z-index:'+z+';';
              tgt.setAttribute('style', position);
            };
          });
          document.addEventListener('touchmove',function(e) {
              var touches = e.changedTouches;
            if(moving === true){
              for(let i = 0; i < touches.length; i++){
                  var dx = touches[i].pageX - offsetX + x - tgt.initialOffsetX;
                  var dy = touches[i].pageY - offsetY + y - tgt.initialOffsetY;
                  var position = 'transform: translate('+dx+'px, '+dy+'px);z-index:'+z+';';
                  tgt.setAttribute('style', position);
              }
            };
          });
      }
    }
function drag ( event ) { if ( ! event . target . classList . contains ( "text" ) ) { editing = false ; if ( editing ) { editedText . blur ( ) ; } } if ( ! editing ) { event . preventDefault ( ) ; moving = true ; z = z + 1 ; tgt = event . target ; tgt . attributeName = 'test' ; b = tgt . getBoundingClientRect ( ) ; var x = b . left + window . pageXOffset ; var y = b . top + window . pageYOffset ; offsetX = event . pageX || event . changedTouches [ 0 ] . pageX ; offsetY = event . pageY || event . changedTouches [ 0 ] . pageY ; document . addEventListener ( 'mousemove' , function ( e ) { if ( moving === true ) { var dx = e . pageX - offsetX + x - tgt . initialOffsetX ; var dy = e . pageY - offsetY + y - tgt . initialOffsetY ; var position = 'transform: translate(' + dx + 'px, ' + dy + 'px);z-index:' + z + ';' ; tgt . setAttribute ( 'style' , position ) ; } ; } ) ; document . addEventListener ( 'touchmove' , function ( e ) { var touches = e . changedTouches ; if ( moving === true ) { for ( let i = 0 ; i < touches . length ; i ++ ) { var dx = touches [ i ] . pageX - offsetX + x - tgt . initialOffsetX ; var dy = touches [ i ] . pageY - offsetY + y - tgt . initialOffsetY ; var position = 'transform: translate(' + dx + 'px, ' + dy + 'px);z-index:' + z + ';' ; tgt . setAttribute ( 'style' , position ) ; } } ; } ) ; } }
Main logic, called when the mouse is clicked
Main logic called when the mouse is clicked
// If the targeted element is not text
 // Set editing to false and lose focus on the text field
 // If you are not clicking on a text element that is currently being edited
 // Prevent default behavior and increase z index to bring the new element to the front
 // Identify which element was clicked and store in the 'tgt' element, then get position properties of it
 // If the page has been clicked and an element is being dragged
 // Calculate the new position of the element, relative to the top left of the page
 // Apply the styles to the element
 // If the page has been clicked and an element is being dragged
 // Calculate the new position of the element, relative to the top left of the page
 // Apply the styles to the element
