<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/