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

拖动对象时，jquery会将偏移量（top / left）直接应用于元素。如果你将这个draggable添加到一个新容器中，新容器就是父容器，现在将从容器位置而不是屏幕应用偏移量 - 至少这是我的解释。

这是我使用的一种解决方法：帮助程序克隆接收样式，使原始元素干净地附加。开始/停止切换显示，使其看起来像是在拖动实际元素。

$("#draggable").draggable({
    revert: 'invalid',
    helper: 'clone', 
    zIndex: 350, 
    start:  function() { $(this).toggle(); }, 
    stop:   function() { $(this).toggle(); } 
});
$("#droppable").droppable({
    accept: '#draggable',
    drop: function(event, ui) {
                // example of effecting parent
                // $(this).addClass('highlight').find('p').html('Dropped!');
                $(ui.draggable).draggable("destroy").appendTo($(this));
    }
});

Answer 2

似乎您应该考虑重新组织您的DOM。我不明白为什么你相对于拖拽开始的绝对定位改变位置，然后在下降时将其改回相对位置。这是一个灾难的处方，因为布局变得更加复杂，自然会为你的标签创造大量机会。如果你检查了萤火虫，你会发现一些孩子不在他们的父母之外，如果你堕入父母，你可能没想到。如果你是一个新的定位类型的世界，并且需要完成它，坚持保持这些可拖动的元素是绝对的，这应该最小化预测行为的困难。但是为了拥有各种分辨率的好网站，你真的应该掌握浏览器如何根据属性放置可见对象。

祝你好运：）

Answer 3

这对我来说效果最好。

$(function() {
    var unit;
    $(".unit").draggable();
    $("#rpgGrid td").droppable({
        drop : function(event, ui) {
            jQuery(ui.draggable).css({
                "top": "0",
                "left": "0"
            });
            $(this).append(ui.draggable, function() {
                $(ui.draggable).remove();
            });
        }
    });
});

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

3 个答案: