Javascript 内容可编辑div html

我有上面的html。页面上可能有一些“dropZone”分区。但每个is都有以下事件绑定：

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

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

$（'#lightbox'）。查找（'.dropZone'）。每个（函数（）{
$（this.mouseover（function（））{
//检查资产是否为图像
if（$（this）.find（'img'）。长度>0）{
var src=$（this.find（'img'）.first（）.attr（'src'），
masterTestVal='mydomain'；
$（this.empty（）；
//检查资源是否来自图像箱
如果（src.search（masterTestVal）>0）{
var that=$（this）.sides（'.imageHolder'）.find（'.droppedImage'），
img=“”；
html（img）；
}否则{
警报（'此处仅接受来自图像箱的图像'）；
}
}否则{
如果（$（this.html（）.length>0）{
警报（'此处仅接受来自图像箱的图像'）；
$（this.empty（）；
}
}
});
});

这个想法很简单，用户可以从他们的“图像箱”拖放一个图像，另一个div加载到页面上，并填充一些预加载的图像。当用户在“drop zone”div上拖动图像时，上面的js将生效，如果图像来自我的域，则所述图像将复制到“droppedImage”div中

这非常好，但在chrome和safari中，用户只能执行一次此操作。在firefix中，我可以无休止地重复这个动作。但在chome和safari中，一滴之后，属性内容似乎丢失了还是什么

有人有什么想法吗

谢谢， 约翰

js fiddle-

而不是$（这个）。mouseover，尝试在该div上绑定mouseover。我认为这会起作用。使用$（this）.bind（'mouseover'，function（）..

Kooilnc 使用拖放行为，您的回答肯定是正确的，但是到目前为止，我还没有找到时间正确理解拖放事件

作为一个bodge修正，我已经找到了一个解决办法，尽管它确实感觉很混乱。我只是删除了Q中的下降区div，并用一个新版本替换，加上在img下降后反弹的事件。所以有点像是重新开始：S

$('#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();
            }
        }
    });
});

//检查资产是否来自映像箱
如果（src.search（masterTestVal）>0）{
var that=$（this）.sides（'.imageHolder'）.find（'.droppedImage'），
img=“”；
html（img）；
$（that.attr（'contenteditable'，'true'））
var newDropBin=$（''）；//您能为此创建fiddle吗？？？我支持简化测试用例的请求（使用多种工具之一：，，等等）。你真的应该为此提供CSS…嗨，好吧，我已经用小提琴复制了效果：嗨，谢谢，但没有乐趣。在chrome中，事件只发生一次。在第一次删除后，你不能再删除任何图像。你什么时候绑定此事件？在删除后是否重新创建img div？我在尝试你的绑定建议时实现了代码但这并没有解决它。是的，我写的修复程序包括在每次使用后重建drop div。但也重新绑定事件请参见我的答案
 // 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);
                            $(that).attr('contenteditable','true')
                            var newDropBin = $('<div contenteditable="true">'); // <= replacing the original drop zone here
                            $(this).replaceWith(newDropBin);
                            $(newDropBin).addClass('drop-zone');
                            dropImg.init();
                        }