Drag & Drop div in specific place of text

Question

This is my first Question. I have two divs.

<div id="var" draggable="true">
<div id="area1" contenteditable="true">

The 1, has some css and all the functions for dnd attached. The 2 is where I want to drop the <div id="var">

I want to unite this two behaviors:

My divs:

  <a id="var" href="#">
    variable
  </a>

<div id="area1" contenteditable="true">
  Phasellus at libero lectus. Morbi pulvinar, augue non tincidunt consequat, mi turpis rhoncus urna, faucibus blandit
  quam lacus aliquet arcu.<br><br>Pellentesque in congue nulla. Vestibulum posuere ligula eget dui mollis aliquet. Fusce euismod
  nisl justo, eu sagittis ipsum facilisis a. Maecenas vel congue augue, sed bibendum sapien. Donec id semper enim, quis
  placerat ipsum.<br><br>
  Vestibulum non mauris a nisi dictum sodales. Cras gravida, felis a sagittis dapibus, massa ipsum pretium purus, in
  semper enim metus ac urna. Mauris bibendum metus ut lacus tristique pulvinar. Fusce viverra lorem quis consectetur
  volutpat. Donec elementum at orci vel auctor. Suspendisse sed fringilla sapien. Proin velit erat, dapibus nec nisl
  at, interdum tempus diam.
</div>

In this snippet (http://jsfiddle.net/3yBZp/6/) the alert is triggered when the id="var" is dropped

In this snippet (http://jsfiddle.net/H24Nk/1/) the <div id="var"> is placed exactly where the mouse cursor is in the event "drop"

I searched like two days, and I could not find something that combine this two behaviors. Let drop <div id="var"> in <div id="area"> in the mouse place, and fire an alert/ajax/other.

Thank you.

Try jqueryui library - there are plugins called draggable, droppable and sortable. But i can see that You are using javascript without libraries - that's kind of COOL. :) — Mr.TK, Apr 10 '14 at 05:36

score 0 · Accepted Answer · edited May 23 '17 at 10:25

I solved my problem in a 95% like I wanted. I had to make some changes:

http://jsfiddle.net/bMLmD/1/

<div id="var"> 
<div id="area1">

to

<textarea id="area1">
Phasellus at libero lectus. Morbi pulvinar, augue non tincidunt consequat
</textarea>

<a href="#" class="button" id="variable" contenteditable="false">
Variable 
</a>

Here http://jsfiddle.net/bMLmD/1/ is the result. When I drop the tag a in the text area, the a drops in the cursor place and then fired an alert/ajax/other.

I copy the funcion insert from here: How do I insert some text where the cursor is? Thanks to Tim, to answer that.

Thanks,

Drag & Drop div in specific place of text

1 Answers1