How to make a image to be draggable html
<p>I have three buttons which add images to a div on my site. Now I want the added image to make so that I can drag it in my div. I doesn't has to be a div, it can be a canvas, I just want the images are added to be draggable. </p>

<p><strong>Snippet :</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function addimage() {
  var img = document.createElement("img");
  img.src = "http://bricksplayground.webs.com/brick.PNG";
  img.height = 50;
  img.width = 100;
  //optionally set a css class on the image
  var class_name = "foo";
  img.setAttribute("class", class_name);

  document.getElementById("myDiagramDiv").appendChild(img);
  //document.body.appendChild(img);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-sm-7 text"&gt;
  &lt;h1&gt;&lt;strong&gt;Div for the images&lt;/strong&gt;&lt;/h1&gt;
  &lt;div class="description"&gt;
    &lt;div id="myDiagramDiv" draggable="true" style="width:600px; height:400px; background-color: #DAE4E4;"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-sm-5 text"&gt;
  &lt;div class="description"&gt;
    &lt;h1&gt;&lt;strong&gt;Text&lt;/strong&gt;&lt;/h1&gt;
  &lt;/div&gt;
  &lt;button type="button" class="btn-primary" onclick="addimage();"&gt;Dodaj sto za 2 osobe&lt;/button&gt;
  &lt;button type="button" class="btn-primary" onclick="addimage();"&gt;Dodaj sto za 4 osobe&lt;/button&gt;
  &lt;button type="button" class="btn-primary" onclick="addimage();"&gt;Dodaj sto za vise od 4 osobe&lt;/button&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>