We Keep Coding

Drag and drop event sometimes doesnt execute the DOM

I have a textarea that has the id = display
javascript:
<script>
function drag(event) {
event.dataTransfer.setData("text", this.event.target.src);
}
function drop(event) {
event.preventDefault();
let data = event.dataTransfer.files;
for (file of data) {
var l = document.getElementById('display').selectionStart;
var text = document.getElementById("display").value;
sub1 = text.substring(l,0);
var len = text.length;
var l2 = sub1.length;
sub2 = text.substring(len,l2);
var test = sub1 + file.name + sub2;
var end = document.getElementById("display").textContent = test;
alert(end);
}
}
function allow(event) {
event.preventDefault();
}
</script>
I type in some text and want to put the dragged file in between the text. When i run this code, the alert shows the correct content, but the DOM never updates.
This only occurs when i input text in the area myself. For example if text is already in the field and i drag and drop the DOM wont update even though the alert shows the correct content.
I have spent countless hours trying to debug this but cant seem to find a solution.
The demo below you will see if you type in the textarea it doesnt work with the drag and drop. But if you dont press any keys and just keep on dragging images it will work
Demo here
Thanks.

This line:
var end = document.getElementById("display").textContent = test;
Should be:
var end = document.getElementById("display").value = test;
.textContent is replaced with .value

EXTJS 5: Get the current cursor position in a textfield or lookupfield

I need to find the current position of the cursor so I can store it in a variable. I've looked at a few SO answers and none have been successful.
What I have so far:
function getCaretPos(id) {
var el = Ext.getCmp(id);
var rng, ii=-1;
var currSelection = window.getSelection();
if(currSelection){
currSelection.modify("character", el.value.length);
// get the current position
// ii = currentPosition
}
return ii;
};
For example: I have a textfield displaying data.
MYWORD
When I place the cursor between the Y and W it should return 2. I've seen a few examples for older versions of IE but none seem to work for me in Chrome.
Does anyone know how this can be done?

var textarea=document.getElementById('textarea');
textarea.onclick=function(){
setTimeout(function(){
console.log(textarea.selectionStart);
},1);
}
<input id="textarea" type="text" value="MYWORD">

I have tried this code in an old version of extjs (2+) on a textfield and it works for me (just tested on IE)
It's about capture the position from the DOM.
var position = item.el.dom.selectionStart;
In your example it will be like:
function getCaretPos(id) {
var element = Ext.getCmp(id);
var currSelection = element.el.dom.selectionStart;
}
If you want to change the position you just need to set de selectionEnd value to the position you want.
element.el.dom.selectionEnd = position;

How can I best make an inline span draggable within a paragraph of text?

I have a paragraph of text in which the user may place a "pin" to mark a position. Once a pin has been placed, I would like to allow the user to move its position by dragging it to a new location in the paragraph. This is simple to do with block elements, but I have yet to see a good way to do it with inline elements. How might I accomplish this?
I have already implemented it using window.selection as a way to find the cursor's location in the paragraph, but it is not as smooth as I would like.
As a note, I am using the Rangy library to wrap the native Range and Selection functionality, but it works the same way as the native functions do.
Here is the code:
$(document).on("mousedown", '.pin', function () {
//define what a pin is
var el = document.createElement("span");
el.className = "pin";
el.id = "test";
//make it contain an empty space so we can color it
el.appendChild(document.createTextNode("d"));
$(document).on("mousemove", function () {
//get the current selection
var selection = rangy.getSelection();
//collapse the selection to either the front
//or back, since we do not want the user to see it.
if (selection.isBackwards()) {
selection.collapseToStart();
} else {
selection.collapseToEnd();
}
//remove the old pin
$('.pin').remove();
//place the new pin at the current selection
selection.getAllRanges()[0].insertNode(el);
});
//remove the handler when the user has stopped dragging it
$(document).on("mouseup", function () {
$(document).off("mousemove");
});
});
And here is a working demo: http://jsfiddle.net/j1LLmr5b/22/ .
As you can see, it works(usually), but the user can see the selection being made. Have any ideas on how to move the span without showing the selection highlight? I will also accept an alternate method that does not use the selection at all. The goal is to allow movement of the span as cleanly as possible.

You can do this using ranges instead using code similar to this answer. Unfortunately the code is a bit longer than ideal because IE hasn't yet implemented document.caretPositionFromPoint(). However, the old proprietary TextRange object, still present in IE 11, comes to the rescue.
Here's a demo:
http://jsfiddle.net/j1LLmr5b/26/
Here's the relevant code:
var range, textRange, x = e.clientX, y = e.clientY;
//remove the old pin
$('.pin').remove();
// Try the standards-based way first
if (document.caretPositionFromPoint) {
var pos = document.caretPositionFromPoint(x, y);
range = document.createRange();
range.setStart(pos.offsetNode, pos.offset);
range.collapse();
}
// Next, the WebKit way
else if (document.caretRangeFromPoint) {
range = document.caretRangeFromPoint(x, y);
}
// Finally, the IE way
else if (document.body.createTextRange) {
textRange = document.body.createTextRange();
textRange.moveToPoint(x, y);
var spanId = "temp_" + ("" + Math.random()).slice(2);
textRange.pasteHTML('<span id="' + spanId + '"> </span>');
var span = document.getElementById(spanId);
//place the new pin
span.parentNode.replaceChild(el, span);
}
if (range) {
//place the new pin
range.insertNode(el);
}

Try this my friend
el.appendChild(document.createTextNode("d"));
You have create empty span tag that's why you found empty.

add after
el.id = "test";
this
var value = $('.pin').text();
$(el).text(value);
You can hide selection with css
::selection {color:red;background:yellow;}
::-moz-selection {color:red;background:yellow;}
that's all how i can help for a now

Shuffle selected text on <textarea> using JavaScript

When I select some texts on the <textarea> using my mouse, how can I shuffle/scramble it by clicking on a button?
I've searched for something similar to what I want here on SO, and I saw some who use substring, selectionStart, and selectionEnd.
What I want is: when I select some texts with my mouse, it will be shuffled/scrambled when I click on a button, and the rest of the texts on the <textarea> that are not selected should remain untouched/intact.
I just want to perform an action on the selected texts.
It's more similar to a rich text editor like when you select on some texts, then click on bold button, the selected texts will become bold.
P.S.
It should be shuffled by individual characters.
EDIT:
Got it! I just needed to separate the selection string. My code works now. This is very helpful - https://stackoverflow.com/a/9605191/1101391
Unfortunately, IE 9 and below does not support selectionStart and selectionEnd properties on <input> and <textarea>. Here's the solution that worked for me - https://stackoverflow.com/a/9276457/1101391

You have access to the full text and know the substring where the selection starts and ends. Try something like this:
var txtArea = document.getElementById("foo");
var before = txtArea.value.substr(0, txtArea.selectionStart);
var selection = txtArea.value.substr(txtArea.selectionStart, txtArea.selectionEnd + 1);
var after = txtArea.value.substr(txtArea.selectionEnd, txtArea.value.length);
txtArea.value = before + scrambleThisString(selection) + after;

Suppose you name the textarea with ID content:
var textarea = document.getElementById('content');
var content = textarea.value;
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var before = content.slice(0, start);
var after = content.slice(end);
var selected = content.substring(start, end);
selected = shuffleStringByMagic(selected);
textarea.value = before + selected + after;

javascript get text at mose postion

How can I get text at mouse position?
I have now some like this
document.body.onmousemove = function(){
//todo:Get text at mouse position
}

One way of doing so is using [PrototypeJs][1]
Try this one let me know if there is any problem
$(document.body).observe('click', respondToClick);
function respondToClick(event) {
var element = event.element();
var source = element.innerHTML;
}