可以使OL拖動，但沒有孩子LIS

拖動一個項目從一個格至目標DIV
一旦它被包含在目標DIV，使其內拖動目標DIV

將項目目標DIV
在目標div內，使父列表可拖動
但是不能使列表項本身拖動。

我想每個列表項爲可拖動作爲一個獨立的實體。

這裏是我的加價：

<div id="catalog"> 
    <div> 
     <ul> 
     <li>Lolcat Shirt</li> 
     <li>Cheezeburger Shirt</li> 
     <li>Buckit Shirt</li> 
     </ul> 
    </div> 
</div> 

<div id="cart"> 
    <div class="ui-widget-content"> 
    <ol> 
     <li class="placeholder">Add your items here</li> 
    </ol> 
    </div> 
</div>

這裏是我的功能：

$("#catalog li").draggable({ 
    appendTo: "body", 
    helper: "clone" 
}); 
$("#cart ol").droppable({ 
    activeClass: "ui-state-default", 
    hoverClass: "ui-state-hover", 
    drop: function(event, ui) { 
     $(this).find(".placeholder").remove(); 
     $("<li></li>").text(ui.draggable.text()).appendTo(this); 
    } 
}); 
$("#cart li").draggable({ 
    containment:"document", 
    cursor:"move" 
});

瞄準與#cart李列表項不working-沒有任何反應。我可以想到的針對單個目標的任何變化都是相同的。誰能告訴我我做錯了什麼？

編輯：

我現在可以看到正在發生的事情是，通過LIS項目拖放到購物車中沒有獲得所需的類= UI的可拖動屬性創建的。現在我正在尋找一種方法，使由落下產生一定的加價從這個雲：

<li>List item</li>

這樣：

<li class="ui-draggable">List item</li>

這裏是產生這一行：

$("<li></li>").text(ui.draggable.text()).appendTo(this);

我該如何改變它以便讓LIs收到ui-draggable的類？

編輯2：

只需添加類將無法工作，因爲我只是試圖addClass發現的（）。仍在尋找解決方案。

來源

2013-04-29 Ila

這是因爲他們是動態添加的內容，你需要調用draggable每個動態添加的內容

var cartlidragopts = { 
    containment:"document", 
    cursor:"move" 
}; 

$("#cart ol").droppable({ 
    activeClass: "ui-state-default", 
    hoverClass: "ui-state-hover", 
    accept: ":not(.ui-sortable-helper)", 
    drop: function(event, ui) { 
     $(this).find(".placeholder").remove(); 
     $("<li></li>").text(ui.draggable.text()).appendTo(this).draggable(cartlidragopts); 
    } 
}); 
$("#cart ol li").draggable(cartlidragopts);

演示的：Fiddle

來源

2013-04-29 13:36:00

我們發現了不同的方法，但答案是正確的：對於動態添加的內容，需要爲每個動態項目調用可拖動的內容。 – Ila 2013-04-29 13:41:44

我需要做出#cart投遞功能可拖動的內，像這樣：

$("#cart ul").droppable({ 
    activeClass: "ui-state-default", 
    hoverClass: "ui-state-hover", 
    accept: ":not(.ui-sortable-helper)", 
    drop: function(event, ui) { 
    $(this).find(".placeholder").remove(); 
    $("<li></li>").text(ui.draggable.text()).appendTo(this); 
    $("#cart li").addClass("ui-draggable"); 
    $("#cart ul li").draggable({containment:"document", cursor:"move"}); 
    } 
});

的jsfiddle：http://jsfiddle.net/Fp25w/4/

來源

2013-04-29 13:40:22 Ila

可以使OL拖動，但沒有孩子LIS

回答

相關問題