多个可放置的 div

Question

我已经在类别列表中设置了一个联系人列表...

http://jsfiddle.net/dalkill/ny7qeep6/2/

<div class='category_snap_to_target green'>
    <div class='contact_draggable'>
        blah blah1
    </div>
        <div class='contact_draggable'>
    blah blah2
    </div>
</div>

<div class='category_snap_to_target yellow'>
    <div class='contact_draggable'>
        blah blah3
    </div>
    <div class='contact_draggable '>
        blah blah4
    </div>
</div>

<div class='category_snap_to_target red'>
    <div class='contact_draggable'>
        blah blah5
    </div>
    <div class='contact_draggable'>
        blah blah6
    </div>
</div>

<div class='category_snap_to_target blue'>

</div>

<style>
    .blue { background-color: blue }
    .red { background-color: red }
    .green { background-color: green }
    .yellow { background-color: yellow }
</style>

<script>
    $(function() {
        $( '.contact_draggable' ).draggable();


        $('.category_snap_to_target').droppable({ 
                accept: '.contact_draggable',  
                drop: function(event, ui){ 

                    $(this).append($( ui.draggable ));
                    $( ui.draggable ).css('position', ''); 
                }
        });
    });
</script>  

用户可以联系并放入另一个类别...但是在第一次拖放后，div 失去了显示助手的能力...

它仍然可以很好地拖放...但是在第二次尝试移动相同的联系人 div 时，它失去了它的辅助功能。仍然可以拖放，但对用户没有视觉指示。

我还必须添加 $( ui.draggable ).css('position', '');通过将联系人 div 附加到类别 div 中，使“附加”功能很好地工作。没有它，联系人 div 将停留在您上次使用鼠标离开的位置，并且不会在该类别中的最后一个联系人下方卡入到位???

Answer 1

您需要position: relative 来获得视觉指示。您可以设置left: auto 和top:auto，而不是设置position: ''。

$( ui.draggable ).css('left', 'auto');
$( ui.draggable ).css('top', 'auto');

Check out the Fiddle