4

pluploaderがあり、ファイルドロップゾーンがあり、そのIDはdropFilesHere;です。

var uploader = new plupload.Uploader({
        drop_element : "dropFilesHere", 
        /*...*/
    });

ユーザーがファイルをドロップゾーンにかざす場合は、ドロップゾーンにいくつかの変更*（Gmailファイルの添付ファイルなど）を加えたいと思います。

*例えば：

.mouse_over{
    border-width:5px border-style:dashed #808080;
}

サンプル： ファイルをドロップする

これどうやってするの？

uploader.bind('Init', function(up, params) {
    $('#filelist').html("<div>Current runtime: " + params.runtime + "</div>");
    if(params.runtime === 'html5') {
        $('#dropFilesHere').on({
            "dragenter": function(){
                $(this).addClass('mouse_over');
            },
            "dragleave drop": function(){
                $(this).removeClass('mouse_over');
            }
        });
    }
});
4

2 に答える 2

2

初期化されたランタイムがhtml5の場合、次のように試すことができます。

// the runtime has been initialized :
var uploader = $(item).pluploadQueue();

if(uploader.runtime === 'html5') {
$('li.plupload_droptext').bind('dragenter', function() {
    $(this).css("border", "5px dashed #000000");
});

$('li.plupload_droptext').bind('dragleave', function() {
    $(this).css("border", "0px none");
});
}

Chrome18とFirefox11でテスト済み。これがお役に立てば幸いです。

別の問題は、ドロップゾーンの外へのドロップを禁止することです...

于 2012-04-16T16:26:49.927 に答える
0

CSS:hoverセレクターを使ってみましたか？

.dropFilesHere:hover {
    border-width:5px border-style:dashed #808080;
}

$('.dropFilesHere').mouseout()また、純粋なものを使用して、$('.dropFilesHere').mouseenter()または単に純粋なものを使用して、クライアントのjQueryトリガーをアタッチすることもできます$('.dropFilesHere').hover()

とにかく、CSSはJSよりも効率的である場合があるため、CSSを使用することをお勧めします。

于 2012-04-16T08:10:22.207 に答える