• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[JQUERY] [gelöst] Text Cursor dort Positionieren wo Maus ist

K

Kevinalone

New member
Hallo gibt es in JQuery eine möglichkeit den Text Cursor dort zu positionieren wo gerade die Maus ist?
Ich möchte ein dragable Element (ein text) im Editor wo der Cursor ist einfügen
 
Zuletzt bearbeitet von einem Moderator:
AW: Text Cursor dort Positionieren wo Maus ist

Warum musst du das überhaupt mit jQuery/JS machen? Wenn du sowieso Text markiert hast und rumschiebst, wird der in einem <textarea> oder <input> immer an der Stelle der Maus eingefügt... oder ist dein Problem etwas komplizierter?

Ev. könnte das weiterhelfen: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer - dabei setzt man aber an der anderen Seite an. Also wenn man anfängt zu ziehen.

- - - Aktualisiert - - -

Hab' mal auf die Schnelle das zusammengekloppt:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css"></style>
</head>
<body>
<textarea></textarea>
<script type="text/javascript">
[1,2,3,4,5].forEach(function(i){
	var div = document.createElement("div");
	div.draggable = true;
	div.innerHTML = "node " + i;
	div.addEventListener("dragstart", function(ev){
		ev.dataTransfer.clearData();
		ev.dataTransfer.setData("text", "my nice content #" + i);
	}, false);
	document.body.appendChild(div);
});
</script>
</body>
</html>
- funktioniert sogar im IE.
 
AW: Text Cursor dort Positionieren wo Maus ist

Ja es ist komplizierter den ich habe mehrere Listen. Einmahl verschiebe ich HTML Elemente von links das rechte div hinein der Sortable sein soll deshalb funktioniert es mit Input oder Textarea nicht. Diese element sind contentable = true und ich lade den WysiWyg Editor dadrauf wo ich den Content bearbeiten kann. So jetzt habe ich eine zweite Liste wo z.B. steht Vorname, Nachname,....diese Elemente möchte rechts hineinziehen und der Text Cursor der Maus folgt damit wenn ich den Vornamen loslasse er genau an der Position fallen gelassen wird.

Ich hoffe meine Erklährung war verständlich


Danke schonmahl in vorraus.
 
AW: Text Cursor dort Positionieren wo Maus ist

Der Inhalt bei den ich es hinein droppen will soll kein input oder textarea sein sondern dieser Text ist in einem DIV und ich möchte zwischen dem text im div hineindroppen.

- - - Aktualisiert - - -

dragdrop.png
 
AW: Text Cursor dort Positionieren wo Maus ist

Ob der Bereich, in den du was "reinfallen" lassen willst, ein <input>, <textarea> oder ein contenteditable ist, ist völlig egal: mein Ansatz funktioniert da auch:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
div[contenteditable] {
	border: 1px solid black;
	padding: 1em;
}</style>
</head>
<body>
<div contenteditable="true">Hier steht Text...</div>
<script type="text/javascript">
[1,2,3,4,5].forEach(function(i){
	var div = document.createElement("div");
	div.draggable = true;
	div.innerHTML = "node " + i;
	div.addEventListener("dragstart", function(ev){
		ev.dataTransfer.clearData();
		ev.dataTransfer.setData("text", "my nice content #" + i);
	}, false);
	document.body.appendChild(div);
});
</script>
</body>
</html>
 
AW: Text Cursor dort Positionieren wo Maus ist

Vielen dank hat geklappt wusste nicht das das mit divs auch geht. :D

Ist es möglich nach dem Drop die Markierung aufzuheben weil wenn ich was droppe und bleibt es markiert und wen ich dann ein weiteres div hineindroppe wird es ersetzt weil es logischerweise markiert bleibt?
 
AW: Text Cursor dort Positionieren wo Maus ist

Ja, das ist möglich:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
div[contenteditable] {
	border: 1px solid black;
	padding: 1em;
}</style>
</head>
<body>
<div contenteditable="true">Hier steht Text...</div>
<script type="text/javascript">
[1,2,3,4,5].forEach(function(i){
	var div = document.createElement("div");
	div.draggable = true;
	div.innerHTML = "node " + i;
	div.addEventListener("dragstart", function(ev){
		ev.dataTransfer.clearData();
		ev.dataTransfer.setData("text", "my nice content #" + i);
	}, false);
	document.body.appendChild(div);
});
Array.prototype.slice.call(document.querySelectorAll("div[contenteditable]")).forEach(function(drop){
	drop.addEventListener("drop", function(){
		window.setTimeout(function(){
			window.getSelection().collapseToStart();
		}, 1);
	});
});
</script>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben