diff --git a/README.md b/README.md
new file mode 100644
index 0000000..356c9cd
--- /dev/null
+++ b/README.md
@@ -0,0 +1,5 @@
+# How to Draw and Move Rectangles on HTML SVG with Mouse Move for Graphics Editor
+
+You can watch video for this tutorial on youtube.
+
+https://youtu.be/4zOwqRJMOIc
diff --git a/graphic-editor.html b/move-rects.html
similarity index 56%
rename from graphic-editor.html
rename to move-rects.html
index 8889893..fd6edfa 100644
--- a/graphic-editor.html
+++ b/move-rects.html
@@ -12,26 +12,42 @@
 
 
 
-  <h1>Draw Rectangles on Mouse Move in SVG</h1>
+  <h1>Move Drawn Rectangles</h1>
   <svg id="my-svg" width="700" height="450" style="background-color: blue; margin-top:0px; margin-left:0px"></svg>
+ 
+  <div>
 
+    <button onclick = "selectfun()">Select</button>
+    <button onclick = "rectfun()">Rect</button>
+  </div>
  
   </div>
   <script>
 
     let svg = document.getElementById('my-svg');
     let startX, startY;
-
-
- 
-   
+    
     let rectangle;
     let rectangle2;
+    let recttool=0
 
-    
+    let selecttool = 0;
 
-    function handleMouseDown(event) {
+    function selectfun(){
+
+      selecttool = 1;
+      recttool = 0;
+    }
+
+
+    function rectfun(){
+
+      selecttool = 0;
+      recttool = 1;
+    }
 
+    function handleMouseDown(event) {
+if(recttool ===1){
 rectangle2 = true;
 
 
@@ -41,14 +57,53 @@ <h1>Draw Rectangles on Mouse Move in SVG</h1>
 
 
       rectangle = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+      rectangle.selectrect = 0;
       rectangle.setAttribute('stroke', 'black');
       rectangle.setAttribute('fill', 'transparent');
       svg.appendChild(rectangle);
   
+      rectangle.addEventListener("mousedown", (event)=>{
+
+
+    
+
+if (selecttool === 1){
+
+  startX = event.clientX;
+startY = event.clientY;
+
+  event.target.selectrect = 1;
+}
+
+
+})
+
+
+rectangle.addEventListener("mousemove", (event)=>{
+
+if (event.target.selectrect===1){
+
+
+var x = event.clientX - svg.getBoundingClientRect().left;
+var y = event.clientY - svg.getBoundingClientRect().top;
+event.target.setAttribute('x', x - event.target.getAttribute('width')/2);
+event.target.setAttribute('y', y - event.target.getAttribute('height')/2);
+
+}
+})
+
+
+rectangle.addEventListener("mouseup", (event)=>{
+
+if (selecttool ===1){
+event.target.selectrect = 0;
+
+}
+
+})
   
   
-  
-  
+} 
   
   }
 
@@ -59,8 +114,8 @@ <h1>Draw Rectangles on Mouse Move in SVG</h1>
         const width = Math.abs(event.clientX - startX);
         const height = Math.abs(event.clientY - startY);
 
-        rectangle.setAttribute('x', Math.min(startX, event.clientX-rect.left));
-        rectangle.setAttribute('y', Math.min(startY, event.clientY-rect.top));
+        rectangle.setAttribute('x', Math.min(startX-rect.left, event.clientX-rect.left));
+        rectangle.setAttribute('y', Math.min(startY-rect.top, event.clientY-rect.top));
         rectangle.setAttribute('width', width);
         rectangle.setAttribute('height', height);
       }