how to make drag and drop jquery?
<p>I've been wondering how to make drag and drop with jQuery, because it is difficult to use the javascript drag and drop, and I prefer to use jQuery instead of javascript. What I want is for the child div to be draggable, and only be droppable in the parent divs. When the child div is dropped, if it is not in a parent div, then it will revert back to the last parent div it was in. if the child div was dropped in a parent div, then it will go to the top left corner of the parent div it was dropped in.  The child div is only draggable.
I am fine with using jQuery UI, but I couldn't get the .droppable() function to work.</p>

<h1><strong>HTML:</strong></h1>

<pre><code>&lt;div id="div1" class="div"&gt;
&lt;div id="image" class="image"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div id="div2" class="div"&gt;
&lt;/div&gt;
</code></pre>

<h1><strong>CSS:</strong></h1>

<pre><code>.div {
     float: left;
     margin-left: 5px;
     height: 200px;
     width: 200px;
     border: 3px solid black
        }
.image {
      height: 50px;
      width: 50px;
      background-color: khaki;
    }
</code></pre>

<h1><strong>jQuery (only drag):</strong></h1>

<pre><code>    $("document").ready(function() {
    $(".image").draggable();
});
</code></pre>

<p>jsfiddle: <a href="https://jsfiddle.net/j9pvbuue/8/" rel="nofollow">https://jsfiddle.net/j9pvbuue/8/</a> 
I would highly appreciate if you could directly give me a code for the answer, instead of indirect answers that tell me nothing of how to use it.</p>