javascript - 如何做响应式拖放绝对定位？

Question

我正在使用 JqueryUI 制作一个 dragNdrop 网络应用程序。问题是它没有响应。有人可以帮我解决这个问题吗？

这是我的js代码

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

 }   

    } 
});

我使用的是绝对定位。我怎样才能让它响应？

Answer 1

我不确定，但我认为您的问题在于元素内部的绝对定位，而该元素没有相对定位。请考虑以下事项:

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

相对内部的绝对定位会将子级放置在距离父级左侧 75 像素、距离父级顶部 90 像素的位置。如果父级不是相对的，子级将出现在文档边缘左侧 75 像素和文档顶部 90 像素处(或具有相对定位的下一个父级)。

将此应用于您的代码，您可能希望使用如下内容: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'
        });
      }
    }
  });
});

同样，从您的帖子中并不清楚您要完成的任务或“响应式”的含义。如果您愿意，请编辑您的帖子并提供更好的示例或进一步阐明问题。