now control panel can be moved

etersoft_typos.js

@@ -28,6 +28,15 @@ ETYPOS.prototype = {
 	
         selection: '',
         
+        element: null,
+        
+        /* Переменные для перетаскивания */
+        isDragged: false,
+        isVisible: false,
+        lastMousePos: { x: -1000, y: -1000 },
+        lastBoxPos: { x: 0, y: 0 },
+        dragPadding: 10,
+        
 	//данные для отправки (сайт страницы, текст с ошибкой, комментарий, язык, броузер)
 	userdata: {
 		'url': '',
@@ -122,8 +131,14 @@ ETYPOS.prototype = {
             div.appendChild(controls);
             
             document.body.appendChild(div);
+            
+            this.element = document.querySelector(".e_typos_div");
         },
         
+        // Нужны для onmousemove
+        box_x : 0,
+        box_y : 0, 
+        
         _handleEvents: function() {
             var self = this;
             
@@ -143,6 +158,38 @@ ETYPOS.prototype = {
                     self.controlPanel();
                 }
             };  
+            
+            this.element.addEventListener("mousedown", function(e) {
+                self.lastMousePos.x = e.clientX;
+                self.lastMousePos.y = e.clientY;
+                self.lastBoxPos.x = self.element.offsetLeft;
+                self.lastBoxPos.y = self.element.offsetTop;
+                self.isDragged = true;
+            });
+            
+            this.element.addEventListener("mouseup", function() {
+                self.isDragged = false;
+            });
+            
+            document.addEventListener("mousemove", function(e) {
+               if ( self.isDragged && self.isVisible && ( e.buttons & 1 ) ) {
+                   self.box_x = ( self.lastBoxPos.x + ( e.clientX - self.lastMousePos.x )  );
+                   self.box_y = ( self.lastBoxPos.y + ( e.clientY - self.lastMousePos.y )  );
+                   
+                   if ( self.box_x + self.element.scrollWidth + self.dragPadding > window.innerWidth ||
+                        self.box_x < 0 ) {
+                       return;
+                   }
+                   
+                   if ( self.box_y + self.element.scrollHeight + self.dragPadding > window.innerHeight || 
+                        self.box_y < 0 ) {
+                        return;
+                   }
+                   
+                   self.element.style.left = self.box_x + "px";
+                   self.element.style.top = self.box_y + "px";
+               } 
+            });
         },
         
 	_init: function(options) {
@@ -173,12 +220,13 @@ ETYPOS.prototype = {
 	
 	/*Скрытие/показ окна*/
 	controlPanel: function() {
-		(document.querySelector(".e_typos_div").style.display == "block") ? this.closeWindow() : this.openWindow();
+		(this.element.style.display == "block") ? this.closeWindow() : this.openWindow();
 	},
 
 	/*Открытие окна*/
 	openWindow: function() {
-		var main_div = document.querySelector(".e_typos_div");
+                //console.log(this.selection);
+		var main_div = this.element;
 		
 		//Определяем на какой позиции X, Y всплывет элемент
 		var top = window.pageYOffset + window.innerHeight/3;
@@ -191,11 +239,14 @@ ETYPOS.prototype = {
 		main_div.querySelector(".e_typos_message").innerHTML = "";
 	
 		main_div.style.display = "block";
+                
+                this.isVisible = true;
 	},
 
 	/*Закрытия окна*/
 	closeWindow: function() {
-		document.querySelector(".e_typos_div").style.display = "none";
+		this.element.style.display = "none";
+                this.isVisible = false;
 	},
 
 	/*Проверка данных перед отправкой*/