0

テーブルといくつかの「お気に入り」フォルダーを含むホームページがあります。これらのフォルダは、情報の「お気に入り」行を保持するためのものです。ユーザーは、特定の行の情報をホーム テーブルからフォルダ テーブルにドラッグ アンド ドロップします。行全体をドラッグするのではなく (行が非常に広く、この行をどのフォルダーにドロップするかが不明な場合があるため)、各ケース番号の前に、その行の情報を理想的に保持するアイコンがあります。この場合は矢です。この矢印をドラッグしてこのフォルダにドロップすると、「ドラッグされた行」の情報が「お気に入り」テーブルに追加されます。このアイコンはドロップすると、ホームページの対応する行とともに消えます。フォルダをダブルクリックすると、このフォルダが「開き」、お気に入りの行が表示されます。これが私のフィドルです

$( ".drag" ).draggable({ revert: "invalid" });

$( ".dropTarget" ).droppable({
    drop: function( event, ui ) {
        var dropped = parseInt($(this).attr('title')) + 1;
        $( this )
            .attr('title',dropped+' entries'); 

        var delay =  $(this);
        delay.prop('disabled', true).addClass('ui-state-highlight')
        setTimeout(function() {
            delay.prop('disabled', false).removeClass('ui-state-highlight');
        }, 2000)
    }
});

$( ".dropTarget" ).dblclick(function() {
    $( ".fav1table" ).fadeIn();
    $( ".main" ).hide();
    //$(this).removeClass('glyphicon-folder-close').addClass('glyphicon-folder-open');  
});
4

1 に答える 1

0

まず、矢印をホバリングしながらカーソルの種類を変更することをお勧めします。これはユーザーに役立ちます。必要なのは、既にお気に入りに追加されている行を特定することです。解決策は、2 つの CSS クラスを作成することです。normalとfavorite。すでに「お気に入り」になっている行ごとに、 class を追加しfavoriteます。のような矢印が表示されclass="drag favorite"ます。CSS では、「お気に入り」の矢印を非表示または非表示に設定するだけです。

メソッドのdropイベントで.droppable()、クラス「お気に入り」をドロップ矢印に追加します。ですから、もう見えなくなります。このクラスを後でセレクターで再利用して、たとえばお気に入りの行をすべて選択することができます...

于 2013-09-23T14:03:08.890 に答える