0

ドロップされたアイテムを、ソート可能なリストからターゲットのドロップ可能なボックスに追加したいのですが、ドロップされたアイテムを特定の要素に追加することはできません。

私のjquery、

$(".sortable").sortable({
    update: function(){
    // php update.
    }
}).disableSelection();


$( ".droppable" ).droppable({
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    drop: function( event, ui ) {

        var targetElem = $(this).attr("id");

        $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
            .html( "Dropped! inside " + targetElem );

            alert(targetElem);

        var container = $( this ).find( "ul.dropped-items" ).css({border:"blue solid 1px"});

        container.append(ui.draggable.clone());

        ui.draggable.remove();

    }
});

ドロップされたアイテムはこの要素に追加する必要があります。

<ul class="dropped-items">
</ul>

しかし、それは起こっていません。見逃したものと、それを機能させるにはどうすればよいですか?

jsfiddle テスト ページ.

4

1 に答える 1

0

要素の絶対位置のスタイルを削除できます。

Javascript 

...
container.append(ui.draggable.clone().css({position: 'relative', left: 0, top: 0, width: 'auto', height: 'auto'}));
...

デモ

または、同じことを行うためにスタイリングを追加します。

CSS

.dropped-items li {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
}

デモ

于 2012-12-14T00:49:59.930 に答える