0

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

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 将停留在您上次使用鼠标离开的位置，并且不会在该类别中的最后一个联系人下方卡入到位？？？

4

1 回答 1

1

您需要position: relative用于视觉指示。position: ''您可以设置left: auto和而不是设置top:auto。

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

看看小提琴

于 2014-08-15T14:59:27.483 回答