jQuery的拖放是複製div

好的，所以我從另一個問題抓住了這段代碼片段，並且不能爲我的生活記住哪一個，否則我只會嘗試重新提出這個問題。這是我想要實現的：jQuery的拖放是複製div

我有各種各樣的div並且想要我能拖他們並且交換位置，因此，如果我抓住紅色正方形並且投入在藍色正方形，他們將交換地方（卡入他們的位置）。我只是試圖讓真正的基本代碼工作，一旦我得到了，我將實現不同的樣式表，當他們被交換來改變內容和外觀。

我現在的代碼存在的問題是，當我拖放它會回落到原來的位置，並在我的其他div後創建一個重複的div。希望這是有道理的，這裏是jQuery的：

$(document).ready(function() { 
    src = null; 
    options = { 
     revert:true, 
     /*axis: 'x',*/ 
     opacity: 0.8, 
     start: function() { 
      src = $(this).parent(); 
     } 
    } 

    $(".item").draggable(options); 
    $(".container").droppable({ 
     drop: function(event, ui) { 
      src.append(
       $('.item', this).remove().clone() 
        .removeClass().addClass("item") 
        .css({"left": '', "opacity": '',"top":''}) 
        .draggable(options) 
       ); 

      $(this).append(
       ui.draggable.remove().clone() 
        .removeClass().addClass("item") 
        .css({"left": '', "opacity": '',"top":''}) 
        .draggable(options) 
       ); 
     } 
    }); 

}); 

return this.pushStack(stack);

標記是這樣的：

<div class="container"> 
<div class="item"></div> 
<div class="item"></div> 
<div class="item"></div> 
</div>

造型應該在這裏無所謂，但如果這樣做，我只是將它們設置爲100x100px，一個紅色，一個藍色和一個綠色。

來源

2012-04-01 ledgeJumper

爲什麼不使用[Sortable]（http://jqueryui.com/demos/sortable/）插件？ [例子]（http://jsfiddle.net/didierg/MapEq/） – 2012-04-02 07:31:32

Oooo，我喜歡這個例子。仍然無法在我的網站上工作，但我相信我的問題來自將腳本放在錯誤的地方。我正在做一個MVC3應用程序，所以我對佈局有點粗略。我會糾正這個問題，並在今晚給它一個。 – ledgeJumper 2012-04-02 17:56:18

這是一個解決這個問題的方法，使用swap插件，只是使用jQuery UI。小提琴：http://jsfiddle.net/promatik/YtQRd/

jQuery用戶界面：

$(".item").on("mouseup", function(){ 
    $(this).css("top", "").css("left", ""); 
}); 

$(".item").draggable().droppable({ 
    drop: function(event, ui) { 
     draged = ui.draggable.css("top", "initial").css("left", "initial"); 
     dropped = $(this); 
     var elems = draged.parent().children(); 
     if(elems.index(draged) > elems.index(dropped)) { 
      temp = draged; 
      draged = dropped; 
      dropped = temp; 
     } 
     var nElem = draged.next(); 
     dropped.after(draged); 
     nElem.before(dropped); 
    } 
});

這將做對象的交換拖放。

來源

2013-01-30 18:48:44

優秀，非常乾淨的解決方案。我不記得這是什麼項目，但jsfiddle看起來像我的目標 – ledgeJumper 2013-01-30 20:03:14

jQuery的拖放是複製div

回答

相關問題