如何进行响应拖放绝对定位？

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

} 

    } 
}); 

IM使用绝对定位。我如何使这种响应？

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

同样，从你的文章中不清楚你正在努力完成什么或者“响应”是什么意思。如果你愿意，可以编辑你的文章，并提供一个更好的例子或更清晰的问题。