Jquery/Javascript將一個父母拖放到另一個

我一直在玩JQuery UI可拖動，並且在將元素從父母拖到另一父母時一直在維護元素位置。只要將元素移動到另一個父級，它的定位就會消失。然後我開始鍛鍊偏移量並將其應用到元素上，並且它工作得很好，直到我開始設計頁面樣式，然後所有事情都變得更糟。Jquery/Javascript將一個父母拖放到另一個

這似乎是一個簡單的要求，所以不知道我是否錯過了一個顯而易見的把戲？

道歉，如果上述不明確，很難解釋得很好。

感謝史蒂夫

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

來源

2010-08-10 Steven Cheng

職位的代碼，如果它是很難解釋.. – Lukman 2010-08-10 08:47:32

可能檢查父elems的CSS position屬性：http://stackoverflow.com/questions/2451528/jquery-ui-sortable-scroll-helper-element -offset-firefox-issue/ – zack 2010-11-02 17:16:27

看起來也許你應該考慮重新組織你的DOM。我不明白爲什麼你改變相對於拖動開始的絕對位置的位置，然後將其改回到相對拖放。當佈局變得更加複雜時，這是一個災難的祕訣，自然而然地爲您的標籤跳躍提供了很多機會。如果你檢查了螢火蟲，你會發現一些在父母外面的孩子，如果你在父母身上，你可能沒有想到。如果你對新的定位類型的世界很陌生，並且需要完成它，那麼堅持保持這些可拖動的元素是絕對的，這應該最大限度地減少預測行爲的困難。但是爲了讓各種分辨率的網站變得更好，你應該仔細研究一下瀏覽器在給定屬性的情況下放置可見對象的方式。

祝你好運:)

來源

2010-09-24 23:20:56 sillyMunky

由於我最初發布這個，我已經以一種更簡單的方式實現了我的解決方案。我修改了我的DOM，並以編程方式使拖放變得更容易。我仍然在學習，但在我的項目的這一部分中肯定有主要的元素定位。感謝您的回答！ – 2010-09-27 13:08:14

很高興你掌握了它，簡單是關鍵！ +1會很好;-) – sillyMunky 2010-10-20 09:38:50

當拖動對象jQuery的直接應用的偏移，頂/左，風格的元素。如果你將這個可拖拽添加到一個新的容器中，那麼新的容器就是父容器，現在將從容器位置，而不是屏幕上應用偏移量---至少這是我的解釋。

下面是我使用過的一種解決方法：助手克隆接收樣式，將原始元素完全附加到後面。開始/停止切換顯示，使其看起來像拖動實際元素。

$("#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)); 
    } 
});

來源

2010-08-10 08:52:33 WSkid

感謝你們，我會放棄這一點，看看我如何繼續。 – 2010-08-10 09:08:36

我測試了你的腳本，首先它在$（ui.draggable）.draggable（「destroy」）上產生一個錯誤。appendTo（$（this））;快速谷歌建議我使用禁用而不是銷燬，我做了，代碼執行得很好。但是，它將元素放到父項中，但沒有保留位置。不知道我上面的問題是否清楚，但基本上，當我拖動我需要的元素來重新分配父級並保留新父級中的位置時。 – 2010-08-10 09:23:19

這個工作最適合我。

$(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(); 
      }); 
     } 
    }); 
});

來源

2014-03-03 20:22:46 americanknight

Jquery/Javascript將一個父母拖放到另一個

回答

相關問題