如何做出响应式拖放绝对定位？答案

【问题标题】：how to make responsive drag and drop absolute positioning?如何做出响应式拖放绝对定位？
【发布时间】：2016-11-16 16:05:07
【问题描述】：

我正在使用 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'
           });

 }   

    } 
});

我使用绝对定位。我怎样才能使这个响应？

【问题讨论】：

我们需要更多关于您实际要求的信息。 “响应式”很棒，但是在您的上下文中这实际上意味着什么？通常这是 CSS/Layout 的事情，但你只添加了你的 JS。
我只是想知道如何让这个响应。因为我在下降时使用绝对定位。这就是我上面的代码。
你能添加你的 HTML 吗？而且我仍然不确定您在这种情况下“响应”的确切含义，您想“响应”什么以及以什么方式？
我的意思是，当我调整浏览器大小时，我希望放置的元素位于放置区域内。因为当我调整浏览器大小时它会保持原位。
所以您想将它附加到您的#dropzone 中吗？而不是一个刚刚定位的元素？

标签： javascript jquery css jquery-ui drag-and-drop

【解决方案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>

relative 内部的绝对定位将使子级距父级左侧 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'
        });
      }
    }
  });
});

再次，从您的帖子中不清楚您要完成什么或“响应式”是什么意思。如果您愿意，请编辑您的帖子并提供更好的示例或进一步说明问题。

【讨论】：

扭曲爵士。我试过你的代码，它有效！谢谢！