如何使拖放元素的子元素可拖動？

Question

我正在經歷艱難的時間，使.num被拖入appendTo的.container。

我試過幾件事。我得到的最接近的是讓所有的.nums成爲同一個容器的孩子，儘管只有我拖着的那個應該追加。

我在這裏設置了一個非常好的，簡單的小提琴。 http://jsfiddle.net/6UvvQ/2/將紅色框拖入藍色容器之一後，單擊「測試」按鈕，它應該爲框顯示ImYourFather1或ImYourFather2。如果它說ImNotYourFather，它不起作用。

HTML

<div class="wrapper"> 
<ol class="ImNotYourFather"> 
    <li class="num" value="4">4</li> 
    <li class="num" value="15">15</li> 
    <li class="num" value="11">11</li> 
    <li class="num" value="7">7</li> 
</ol> 
</div> 
<div class="ImYourFather1 container leftcontainer"></div> 
<div class="ImYourFather2 container rightcontainer"></div> 
<button class="test">Test</button> 
<div class="logs"></div> 

JS/jQuery的/ jQueryUI的

$('.num').draggable({ 
     containment: '.wrapper', 
     appendable: '.container', 
     drag: function(event, ui) {} 
    }); 
    $('.container').droppable({ 
     accept: '.num', 
     greedy: true, 
     drop: function(event, ui) {} 
    }); 
    $(".num").on("drag", function(event, ui) { 
     var abcde = $(this); 
     }); 

    $(".container").on("drop", function(event, ui) { 
     abcde.appendTo(this); 
    }); 

$('.test').on('click', function() { 
    $('.logs').show(); 
    for (var x = 0; x < 4; x += 1) { 
     var whoseMyDaddy = $('.num').parent().attr('class'); 
     $('<p>'+whoseMyDaddy+'</p>').appendTo('.logs'); 
    } 
}); 

Answer 1

這應該使.container可拖動的父：

$('.container').on('drop', function(event, ui) { 
    $(this).append(ui.draggable); 
}); 

注意：您不需要然後「拖動」處理程序。

而且，你對.test按鈕處理程序沒有顯示你想要的東西，但這會：

$('.test').on('click', function() { 
    $('.logs').show(); 
    $('.num').each(function() { 
     var whoseMyDaddy = $(this).parent().attr('class'); 
     $('<p>'+whoseMyDaddy+'</p>').appendTo('.logs'); 
    }); 
}); 

的問題是，你的代碼循環四次，但總是得到班上第一的.num元素的父級。

還有一件事：當可拖動元素爲<li>元素時，容器可能爲<div>元素可能並不好。