title: Draggable Elements
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;DRAG &amp; DROP&lt;/title&gt;
  
      &lt;script type="text/javascript"&gt;
  //&lt;![CDATA[
  //try{if (!window.CloudFlare) {var CloudFlare=[{verbose:0,p:0,byc:0,owlid:"cf",bag2:1,mirage2:0,oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/dok3v=1613a3a185/"},atok:"e249f4e174edf7af03a74bc76c145d98",petok:"4a10f38bb2d4b46c1cff3e9e6e64e00d2795f082-1436193605-1800",zone:"oc-static.com",rocket:"0",apps:{}}];CloudFlare.push({"apps":{"ape":"4a1bcba3f7297e6bc2869c4a33323412"}});!function(a,b){a=document.createElement("script"),b=document.getElementsByTagName("script")[0],a.async=!0,a.src="//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=7e13c32551/cloudflare.min.js",b.parentNode.insertBefore(a,b)}()}}catch(e){};
  //]]&gt;
  &lt;/script&gt;
  &lt;style&gt;
        .dropper {
      display: inline-block;
            margin: 50px 10px 10px 50px;
      vertical-align: top;
            background-color: #555;
            border: 1px solid #111;
            
            -moz-border-radius: 10px;
            border-radius: 10px;
            
            -moz-transition: all 200ms linear;
            -webkit-transition: all 200ms linear;
            -o-transition: all 200ms linear;
            transition: all 200ms linear;
        }
  
        .drop_hover {
            -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.8) inset;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.8) inset;
        }
  
        .draggable {
            display: inline-block;
            margin: 20px 10px 10px 20px;
            padding-top: 20px;
            width: 60px;
            height: 30px;
            color: #3D110F;
            background-color: #822520;
            border: 4px solid #3D110F;
            text-align: center;
            font-size: 1em;
            cursor: move;
            
            -moz-transition: all 200ms linear;
            -webkit-transition: all 200ms linear;
            -o-transition: all 200ms linear;
            transition: all 200ms linear;
            
            -moz-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            user-select: none;
        }
      &lt;/style&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
   
    &lt;div class="dropper"&gt;
         
          &lt;div class="draggable"&gt;Block1&lt;/div&gt;
          &lt;div class="draggable"&gt;Block2&lt;/div&gt;
          &lt;div class="draggable"&gt;Block3&lt;/div&gt;
  
    
      &lt;/div&gt;
   
   &lt;div class="dropper"&gt;
  
        
      &lt;/div&gt;
  
   &lt;script&gt;
   var x=document.querySelectorAll('.dropper');
    x[0].style.height="600px";
    x[0].style.width="200px";
    
    
    x[1].style.height="600px";
    x[1].style.width="999px";
    
     &lt;/script&gt;
  ​
  
  
      &lt;script&gt;
      (function() {
      
      var dndHandler = {
          
          draggedElement: null, // Propriété pointant vers l'élément en cours de déplacement
          
          applyDragEvents: function(element) {
              
              element.draggable = true;
  
              var dndHandler = this; // Cette variable est nécessaire pour que l'événement « dragstart » ci-dessous accède facilement au namespace « dndHandler »
              
              element.addEventListener('dragstart', function(e) {
                  dndHandler.draggedElement = e.target; // On sauvegarde l'élément en cours de déplacement
                  e.dataTransfer.setData('text/plain', ''); // Nécessaire pour Firefox
      
     }, false);
              
          },
   
          applyDropEvents: function(dropper) {
              
              dropper.addEventListener('dragover', function(e) {
                  e.preventDefault(); // On autorise le drop d'éléments
                  this.className = 'dropper drop_hover'; // Et on applique le style adéquat à notre zone de drop quand un élément la survole
              }, false);
              
              dropper.addEventListener('dragleave', function() {
                  this.className = 'dropper'; // On revient au style de base lorsque l'élément quitte la zone de drop
              });
              
              var dndHandler = this; // Cette variable est nécessaire pour que l'événement « drop » ci-dessous accède facilement au namespace « dndHandler »
  
              dropper.addEventListener('drop', function(e) {
  
                  var target = e.target,
                      draggedElement = dndHandler.draggedElement, // Récupération de l'élément concerné
                      clonedElement = draggedElement.cloneNode(true); // On créé immédiatement le clone de cet élément
                  
                  while (target.className.indexOf('dropper') == -1) { // Cette boucle permet de remonter jusqu'à la zone de drop parente
                      target = target.parentNode;
                  }
  
                  target.className = 'dropper'; // Application du style par défaut
                  
                  clonedElement = target.appendChild(clonedElement); // Ajout de l'élément cloné à la zone de drop actuelle
                  dndHandler.applyDragEvents(clonedElement); // Nouvelle application des événements qui ont été perdus lors du cloneNode()
                  
                  draggedElement.parentNode.removeChild(clonedElement);    // Suppression de l'élément d'origine
                  
              });
              
          }
   
      };
      
      var elements = document.querySelectorAll('.draggable'),
          elementsLen = elements.length;
      
      for (var i = 0 ; i &lt; elementsLen ; i++) {
          dndHandler.applyDragEvents(elements[i]); // Application des paramètres nécessaires aux éléments déplaçables
      }
      
      var droppers = document.querySelectorAll('.dropper'),
  
          droppersLen = droppers.length;
      
      //for (var i = 0 ; i &lt; droppersLen ; i++) {
          dndHandler.applyDropEvents(droppers[1]); // Application des événements nécessaires aux zones de drop
      //}
  
   })();
      &lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I started programming using html/css/jquery/jscript. I had to make two blocks. We can drag elements from the left block to put them on the right one. And we can't do the opposit. In addition to that the elements on the left are not deleted when dragged. Here is my code:  </p>
  
  <pre><code>(function() {
  
              var dndHandler = {
  
                  draggedElement: null, // Propriété pointant vers l'élément en cours de déplacement
  
                  applyDragEvents: function(element) {
  
                      element.draggable = true;
  
                      var dndHandler = this; // Cette variable est nécessaire pour que l'événement « dragstart » ci-dessous accède facilement au namespace « dndHandler »
  
                      element.addEventListener('dragstart', function(e) {
                          dndHandler.draggedElement = e.target; // On sauvegarde l'élément en cours de déplacement
                          e.dataTransfer.setData('text/plain', ''); // Nécessaire pour Firefox
                      }, false);
  
                  },
  
                  applyDropEvents: function(dropper) {
  
                      dropper.addEventListener('dragover', function(e) {
                          e.preventDefault(); // On autorise le drop d'éléments
                          this.className = 'dropper drop_hover'; // Et on applique le style adéquat à notre zone de drop quand un élément la survole
                      }, false);
  
                      dropper.addEventListener('dragleave', function() {
                          this.className = 'dropper'; // On revient au style de base lorsque l'élément quitte la zone de drop
                      });
  
                      var dndHandler = this; // Cette variable est nécessaire pour que l'événement « drop » ci-dessous accède facilement au namespace « dndHandler »
  
                      dropper.addEventListener('drop', function(e) {
  
                          var target = e.target,
                          draggedElement = dndHandler.draggedElement, // Récupération de l'élément concerné
                          clonedElement = draggedElement.cloneNode(true); // On créé immédiatement le clone de cet élément
  
                          while (target.className.indexOf('dropper') == -1) { // Cette boucle permet de remonter jusqu'à la zone de drop parente
                              target = target.parentNode;
                          }
  
                          target.className = 'dropper'; // Application du style par défaut
  
                          clonedElement = target.appendChild(clonedElement); // Ajout de l'élément cloné à la zone de drop actuelle
                          dndHandler.applyDragEvents(clonedElement); // Nouvelle application des événements qui ont été perdus lors du cloneNode()
  
                          draggedElement.parentNode.removeChild(clonedElement); // Suppression de l'élément d'origine
  
                      });
  
                  }
  
              };
  
              var elements = document.querySelectorAll('.draggable'),
              elementsLen = elements.length;
  
              for (var i = 0 ; i &lt; elementsLen ; i++) {
                  dndHandler.applyDragEvents(elements[i]); // Application des paramètres nécessaires aux éléments déplaçables
              }
  
              var droppers = document.querySelectorAll('.dropper'),
  
              droppersLen = droppers.length;
  
              //for (var i = 0 ; i &lt; droppersLen ; i++) {
                  dndHandler.applyDropEvents(droppers[1]); // Application des événements nécessaires aux zones de drop
              //}
  
          })();}
  </code></pre>
  
  <p>My problem is when the elements are on the right block, they're positioned inline-block. I want to be able to drag them where ever I want in the block.
  I found a way that make my element draggable where ever I want. But it's applied on the left block too:</p>
  
  <pre><code>$(function() {
      $( "#dg1" ).draggable();            
  });
  </code></pre>
  
  <p>What I want is: When the elements are on the left block, they stay inline-block. And when I drag them to the right block, I want to be able to put them where ever I want in that block.</p>
  
  <p>Hope my question was clear enough and thank you for your answers!</p>
  
  <hr>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
      $('.draggable').draggable({
       revert: 'invalid',
       opacity: 0.35,
       helper: function(){
        return $(this).clone().appendTo('#drop_in').css({'zIndex':5});
       },
       cursor: 'move',
       //containment: '#drop_in'
       
       
      });
      
      $('#drop_in').droppable({
       activeClass: 'ui-state-hover',
       accept: '.draggable',
       drop: function(event, ui){
        if (!ui.draggable.hasClass("dropped"))
         $(this).append($(ui.draggable).clone().addClass("dropped").draggable({containment: '#drop_in'}));
       }
      });
      
      
     });
    </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.draggable{
      
      font-family: Tahoma, Geneva, sans-serif;
      -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
      border-radius: 15px;
      border: 1p solid #999;
      background: white;
      
      width: 100px; height: 50px;
      text-align: center;
      margin: 20px 10px 10px 10px;
      padding-top: 20px;
     }
    
    
     .dropper{
      
      -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
      border-radius: 15px;
      border: 1p solid #999;
      background: -webkit-linear-gradient(left,#CCCCCC,#EEEEEE);
      background: -moz-linear-gradient(#CCCCCC, #EEEEEE);
      width: 600px; height: 200px;
      padding-top: 20px;
     }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
   &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt; Droppable &lt;/title&gt;
    
    &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
    &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
   
   &lt;body&gt;
    &lt;div class="dropper" id="drag_from"&gt;
     &lt;div class="draggable"&gt;Drag me!&lt;/div&gt;
     &lt;div class="draggable"&gt;Drag me too!&lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class="dropper" id="drop_in"&gt;
    &lt;/div&gt;
   &lt;/body&gt;
   
   
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My problem is that when I drag the element and put it in the dropper, it isn't dropped where my mouse dropped it. But after the drop I can manipulate it and change its position. How can I change that in my code?</p>