Question

我正在使用JqueryUI创建一个dragNdrop Web应用程序。问题是它没有响应。有人可以帮我这个吗？

继承人我的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'
        });
      }
    }
  });
});

同样，从您的帖子中不清楚您要完成什么或者响应＆＃34;是什么意思。如果您愿意，请编辑您的帖子并提供更好的示例或进一步明确问题。

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

1 个答案: