title: how to make responsive drag and drop absolute positioning?
body: <p>I'm making a dragNdrop web app using JqueryUI. the problem is it's not responsive. Can someone help me with this?</p>
  
  <p>heres my js code</p>
  
  <pre><code>$(document).ready(function() {
  $(".draggable").draggable({
      helper: "clone",
      cursor: 'move'
  });
  $("#dropzone").droppable({
      drop: function (event, ui) {
          var canvas = $(this);
          if (!ui.draggable.hasClass('object')) {
              var canvasElement = ui.helper.clone();
              canvasElement.addClass('object');
              canvas.find("div").removeClass('activeElement');                
              canvasElement.addClass('activeElement');
              canvasElement.removeClass('draggable ui-draggable ui-draggable-handle ui-draggable-dragging');
              canvas.append(canvasElement);                
  
  
              canvasElement.css({
                  left: (ui.position.left),
                  top: (ui.position.top),
                  position: 'absolute',
                  zIndex: 10              
              });
  
              canvasElement.draggable({
               cursor: 'move',
               containment: '#dropzone'
             });
  
   }   
  
      } 
  });
  </code></pre>
  
  <p>im using absolute positioning. how can i make this responsive?</p>