title: Drag, Drop and move Image within web application ASP.net
body: <p>My requirements are</p>
  
  <hr>
  
  <ol>
  <li>Drag an image from a list and Drop it in to a new Div(ImgContainer).original image should be still in the image list. </li>
  </ol>
  
  <hr>
  
  <ol start="2">
  <li>Dropped image should be able to move within that Div(ImgContainer).</li>
  </ol>
  
  <hr>
  
  <p>Help me to do this. This is what I have done. I used ASP.net and 1.9.2(Legacy, for jQuery1.6+ </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
          $(function () {
              $("#Item1").draggable({
                  containment: "#ImgContainer",
                  cursor: 'move',
                  appendTo: "#ImgContainer",
                  helper: "clone"
              });
          });
  
          $(function () {
  
              ImgContainer.droppable({
                  accept: "#gallery &gt; li",
                  activeClass: "ui-state-highlight",
                  drop: function (event, ui) {
                      $("img").clone(ui.draggable.clone()).appendTo(this);
                  }
              });
  
          });
  
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form id="form1" runat="server"&gt;
              &lt;div class="ui-widget ui-helper-clearfix"&gt;
                  &lt;ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix" style="width:400px; float:left !important"&gt;
  
                      &lt;li class="ui-widget-content ui-corner-tr"&gt;
                          &lt;img id="Item1" src="https://cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/home-128.png" alt="The peaks of High Tatras" /&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;br /&gt;
  
                  &lt;div id="ImgContainer" class="ui-widget-content ui-state-default" style="width:600px; height:500px" ondrop="drop(event)"&gt;
  
                      &lt;h4 class="ui-widget-header"&gt;&lt;span class="ui-icon ui-icon-ImgContainer"&gt;ImgContainer&lt;/span&gt;&lt;/h4&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>