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成为draggable的父级：

$('.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元素的父类。

最后一件事：当draggables为<div>元素时，将容器设为<li>元素可能并不好。

如何使可拖动元素的孩子掉进去？

1 个答案: