JQuery drag and drop elements onto div
<p>I am using JQuery UI, more specifically Draggable and Sortable.  </p>

<p>At the moment, I have the following markup</p>

<pre><code>&lt;div class="col-lg-3" id="ddForm"&gt;
    &lt;div class="panel panel-default"&gt;
        &lt;div class="panel-heading"&gt;
            &lt;h4 class="panel-title"&gt;
                &lt;span class=""&gt;&lt;/span&gt;Elements
            &lt;/h4&gt;
        &lt;/div&gt;
        &lt;div id="collapseOne" class="panel-collapse collapse in"&gt;
            &lt;ul class="list-group"&gt;
                &lt;li class="list-group-item draggable"&gt;&lt;span class="fm-header-icon"&gt;&lt;/span&gt;Heading&lt;/li&gt;

                &lt;li class="list-group-item draggable"&gt;&lt;span class="fm-textbox-icon"&gt;&lt;/span&gt;Text Box&lt;/li&gt;

                &lt;li class="list-group-item draggable"&gt;&lt;span class="fm-textarea-icon"&gt;&lt;/span&gt;Text Area&lt;/li&gt;

            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="col-lg-9 bgGrey sortable"&gt;


&lt;/div&gt;
</code></pre>

<p>I have set up a JSFiddle here <a href="https://jsfiddle.net/L2u1Lhyy/" rel="nofollow">JSFiddle</a></p>

<p>What I am trying to do is create a type of form builder.  So in the left panel, I display different form elements.  You can then drag these to the grey div, and the element should take up the width of the div.  Essentially, I am trying to build something similar to the following <a href="http://www.edigitsoftware.com//formbuilder-v2/edit.php?id=5364" rel="nofollow">Link</a></p>

<p>I have managed to make the form elements draggable, but my first problem is being able to drop them onto my div.  How would I go about doing this?</p>

<p>Any advice appreciated.</p>

<p>Thanks</p>