0 
<div contenteditable="true" class="dropZone"></div>

<div class="imageHolder">
    <div class="droppedImage"></div>
</div>

上記のhtmlがあります。ページにいくつかの 'dropZone' div があるかもしれません。ただし、それぞれに次のイベントがバインドされています。

$('#lightbox').find('.dropZone').each(function(){
    $(this).mouseover(function(){
        // check the asset is an image 
        if( $(this).find('img').length > 0 ){
            var src = $(this).find('img').first().attr('src'),
                masterTestVal = 'mydomain';
            $(this).empty();

            // check the asset is from the image bin
            if(src.search(masterTestVal) > 0){
                var that = $(this).siblings('.imageHolder').find('.droppedImage'),
                    img = '<img src="'+src+'"/>';
                that.html(img);
            } else {
                alert('Only images from your image bin are accepted here.');
            }
        } else {
            if($(this).html().length > 0){
                alert('Only images from your image bin are accepted here.');
                $(this).empty();
            }
        }
    });
});

アイデアは単純です。ユーザーは、「画像ビン」から画像をドラッグ アンド ドロップして、事前に読み込まれた画像が読み込まれたページに読み込まれた別の div を使用できます。ユーザーが「ドロップ ゾーン」div に画像をドラッグすると、上記の js が起動します。画像が私のドメインからのものである場合、その画像は「droppedImage」div にコピーされます。

これは完全にうまく機能しますが、chrome と safari では、ユーザーはこのアクションを 1 回しか実行できません。firefix では、アクションを際限なく繰り返すことができます。しかし、chome と safari では、1 ドロップ後に attr contenteditable が失われたようです。

誰にもアイデアはありますか？

ありがとう、ジョン

js フィドル - http://jsfiddle.net/n6EgH/1/

4

2 に答える 2

0

$(this).mouseover の代わりに、その div にマウスオーバーをバインドしてみてください。これはうまくいくと思います。$(this).bind('mouseover',function()..

于 2013-09-08T13:46:37.943 に答える