JSFiddle - React, Tailwind, and code Playground

by Edgar Martinez

HTML

<img class='edPreview' width="128px" src="https://i.ibb.co/68ddF4S/TE-0000-002-8317.png" />

JavaScript

;(function($){

	

  var consola=console.log;
 
 
  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
  
  
 var dynamic_style=function(el,idEl){
	 
	// consola("Objeto ",el);
	 

	var top=0,left=0;
	
	if(typeof el.Config.position.top === "undefined"){
		 var PadreHHijoH=$(document).height()-el.outerHeight();
		 var mitadDeH=(PadreHHijoH/2)+$(document).scrollTop();
		 top=mitadDeH+"px;";
	}else{
		 top=el.Config.position.top+";";
	}
	


	
	
	if(typeof el.Config.position.left === "undefined"){
		var PadreWHijoW=($(document).width()/2)+(el.outerWidth()/2);
		var mitadDeW=PadreWHijoW-(el.outerWidth()/2);
		var correccionScrollW=mitadDeW-$(document).scrollLeft();
		    left=correccionScrollW+"px;";
	}else{
		left=el.Config.position.left+";";
	}

	
	
	 // console.log($(document).height(),el.outerHeight(),$(document).scrollTop());
	 
      var style_modal_container=".modal_"+idEl+"{"+
									  "position: absolute;"+
									  "z-index: 9997;"+
									  "top: "+top+
									  "left: "+left+
                                "}";
								
		$("#modal_style_"+idEl).remove();	
        $('<style id="modal_style_'+idEl+'">').text(style_modal_container).appendTo('head');
 };
  


  var drag_init=function(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
  var move_element=function(e){
    x_pos = document.all ? window.event.clientX : e.pageX;
    y_pos = document.all ? window.event.clientY : e.pageY;
    if (selected !== null) {
		selected.style.position="absolute";
        selected.style.left = (x_pos - x_elem) + 'px';
        selected.style.top = (y_pos - y_elem) + 'px';
    }
  };
  // Destroy the object when we are done
  var...