add function to move textbox

README.md

@@ -43,7 +43,6 @@ Call your site with GET parameters to change the WhiteboardID or the Username
 * You shoud be able to customize without ever toutching the whiteboard.js (take a look at index.html & main.js)
 
 ## ToDo
-* Enable drag and drop for texts
 * Show indicator on slider which tool is active (Pen, Text...)
 * Make undo function more reliable on texts
 * Add more callbacks for errors and things ...

public/css/main.css

@@ -54,9 +54,10 @@ button {
 .textBox.active {
     border: 1px dashed gray;
 }
-.textBox>.removeIcon {
+.textBox>.removeIcon,.textBox>.moveIcon {
     display:none;
 }
-.textBox.active>.removeIcon {
+
+.textBox.active>.removeIcon,.textBox.active>.moveIcon {
     display:block;
 }

public/js/whiteboard.js

@@ -539,12 +539,24 @@ var whiteboard = {
 		var textBox = $('<div id="' + txId + '" class="textBox" style="font-family: monospace; position:absolute; top:' + top + 'px; left:' + left + 'px;">' +
 			'<div contentEditable="true" spellcheck="false" class="textContent" style="outline: none; font-size:' + fontsize + 'em; color:' + textcolor + '; min-width:50px; min-height:50px;"></div>' +
 			'<div title="remove textbox" class="removeIcon" style="position:absolute; cursor:pointer; top:-4px; right:2px;">x</div>' +
-						'</div>')
+			'<div title="move textbox" class="moveIcon" style="position:absolute; cursor:move; top:1px; left:2px; font-size: 0.5em;"><i class="fas fa-expand-arrows-alt"></i></div>' +
+			'</div>');
 		textBox.click(function (e) {
 			e.preventDefault();
 			return false;
 		})
 		this.textContainer.append(textBox);
+		textBox.draggable({
+			handle: ".moveIcon",
+			stop: function () {
+				var textBoxPosition = textBox.position();
+				_this.sendFunction({ "t": "setTextboxPosition", "d": [txId, textBoxPosition.top, textBoxPosition.left] });
+			},
+			drag: function() {
+				var textBoxPosition = textBox.position();
+				_this.sendFunction({ "t": "setTextboxPosition", "d": [txId, textBoxPosition.top, textBoxPosition.left] });
+			}
+		});
 		textBox.find(".textContent").on("input", function () {
 			var text = btoa($(this).html()); //Get html and make encode base64
 			_this.sendFunction({ "t": "setTextboxText", "d": [txId, text] });
@@ -568,6 +580,9 @@ var whiteboard = {
 	removeTextbox(txId) {
 		$("#" + txId).remove();
 	},
+	setTextboxPosition(txId, top, left) {
+		$("#" + txId).css({"top" : top+"px", "left" : left+"px"});
+	},
 	drawImgToCanvas(url, width, height, left, top, doneCallback) {
 		var _this = this;
 		var img = document.createElement('img');
@@ -649,6 +664,8 @@ var whiteboard = {
 				_this.setTextboxText(data[0], data[1]);
 			} else if (tool === "removeTextbox") {
 				_this.removeTextbox(data[0]);
+			} else if(tool === "setTextboxPosition") {
+				_this.setTextboxPosition(data[0], data[1], data[2]);
 			} else if (tool === "clear") {
 				_this.canvas.height = _this.canvas.height;
 				_this.imgContainer.empty();
@@ -672,7 +689,7 @@ var whiteboard = {
 			}
 		});
 
-		if (isNewData && ["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox"].includes(tool)) {
+		if (isNewData && ["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox", "setTextboxPosition"].includes(tool)) {
 			content["drawId"] = content["drawId"] ? content["drawId"] : _this.drawId;
 			content["username"] = content["username"] ? content["username"] : _this.settings.username;
 			_this.drawBuffer.push(content);
@@ -762,7 +779,7 @@ var whiteboard = {
 		if (_this.settings.sendFunction) {
 			_this.settings.sendFunction(content);
 		}
-		if (["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox"].includes(tool)) {
+		if (["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox", "setTextboxPosition"].includes(tool)) {
 			_this.drawBuffer.push(content);
 		}
 	},

s_whiteboard.js

@@ -22,7 +22,7 @@ module.exports = {
 					}
 				}
 			}
-		} else if(["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox"].includes(tool)) { //Save all this actions
+		} else if(["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox", "setTextboxPosition"].includes(tool)) { //Save all this actions
 			if(!savedBoards[wid]) {
 				savedBoards[wid] = [];
 			}