how to make responsive drag and drop absolute positioning?

Question

I'm making a dragNdrop web app using JqueryUI. the problem is it's not responsive. Can someone help me with this?

heres my js 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'
           });

 }   

    } 
});

im using absolute positioning. how can i make this responsive?

Answer 1

I'm not sure, but I think your issue is with the absolute positioning inside of an element, when that element does not have relative positioning. Consider the following:

<div style="position: relative; width: 200px; height: 200px; background: #ccc;">
  <div style="position: absolute; left: 75; top: 90; background: #fff;">Hello World</div>
</div>

The absolute positioning inside of the relative will place the child 75 pixels from the left of the parent, and 90 pixels from the top of the parent. If the parent is not relative, the child would appear 75 picels from the left of the edge of the document and 90 pixels from the top of the document (or the next parent that has relative positioning).

Applying this to your code, you may wish to use something like this: https://jsfiddle.net/Twisty/zzv5gdg2/

HTML

<div id="content">
  <div id="element">
    <div class="draggable ui-widget-content">
      <p>Drag me</p>
    </div>
  </div>
  <div id="dropzone" class="ui-widget-header"></div>
</div>

CSS

.draggable {
  width: 90px;
  height: 90px;
  padding: 0.5em;
  float: left;
  margin: 10px 10px 10px 0;
}

#dropzone {
  width: 200px;
  height: 200px;
  padding: 0.5em;
  float: left;
  margin: 10px;
  position: relative
}

jQuery

$(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);

        var off = canvas.position();
        var canElOff = {
          left: ui.position.left - off.left,
          top: ui.position.top - off.top
        };

        canvasElement.css({
          left: canElOff.left,
          top: canElOff.top,
          position: 'absolute',
          zIndex: 10
        });

        canvasElement.draggable({
          cursor: 'move',
          containment: '#dropzone'
        });
      }
    }
  });
});

Again, it's not clear from your post what you are trying to accomplish or what is meant by "responsive". If you'd like, edit your post and provide a better example or further clarity of the issue.