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

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>元素可能并不好。