Jquery/Javascript 将一个父级拖放到另一个父级

Question

我一直在使用 JQuery UI 可拖动，并且在将元素从一个父级拖动到另一个父级时一直在努力维护元素位置。一旦将元素移动到另一个父元素，它的定位就会偏离。然后我继续计算偏移并将其应用到元素上，效果非常好，直到我开始设计页面样式，然后一切都比以前更糟糕。

这似乎是一个简单的要求，所以不确定我是否错过了一个明显的技巧？

如果以上内容不清楚，我们很抱歉，很难解释清楚。

谢谢史蒂夫

ps。只是下面的 js 代码，它并不漂亮，而且我现在已经硬编码了一些值:

$(document).ready(function() { 
  makeDraggable($(".draggable"));
});

function makeDraggable(el) {
  var clone ;
  var x = 0;
  var y = 0;
  $(el).draggable({
    zIndex: 1000,
    start:function() {
      if($(this).parent().parent().attr("id") == "browser") {
        clone = $(this).clone();
        makeDraggable($(clone));
        $(clone).css("position","absolute");
        $(clone).css("z-index","0");
        $(this).parent().append($(clone));
      } // end if
    },
    drag:function() {},
    stop:function() {
      if($(this).parent().parent().attr("id") == "browser") {
        var offset = 0;
        var total_item_width = parseInt($(this).css("padding-left"))+parseInt($(this).css("padding-right"))+$(this).width();

        $(clone).css("position","relative");
        $("#canvas").append($(this));

        offset = ($("#canvas").find(".draggable").size()-1)*total_item_width;  
        $(this).css("left",parseInt($(this).css("left"))+827-offset);

        offset = ($("#canvas").find(".draggable").size()-1)*($(this).height()+12);
        $(this).css("top",parseInt($(this).position().top));
      } // end if
    }
  });
}

Answer 1

看起来也许你应该考虑重新组织你的 DOM。我不明白为什么要在拖动开始时更改相对于绝对定位的位置，然后在放置时将其更改回相对位置。随着布局变得更加复杂，这会导致灾难，自然会为标签跳转创造大量机会。如果您检查 Firebug，您会发现一些 child 不在 parent 的范围内，如果您将其交给 parent ，您可能没有想到这一点。如果您对定位类型的世界不熟悉，并且需要完成它，请坚持将这些可拖动元素保持绝对，这应该可以最大程度地减少预测行为的困难。但是，要在各种分辨率下拥有漂亮的网站，您确实应该掌握浏览器在给定属性的情况下如何准确地放置可见对象。

祝你好运:)