内容可编辑的 div html答案

【问题标题】：content editable div html内容可编辑的 div html
【发布时间】：2013-09-08 13:14:28
【问题描述】：

<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 中，用户只能执行一次此操作。在firefix中我可以无休止地重复这个动作。但是在 chome 和 safari 中似乎一滴之后 attr contenteditable 就丢失了还是什么？

有人有什么想法吗？

谢谢，约翰

js 小提琴 - http://jsfiddle.net/n6EgH/1/

【问题讨论】：

你可以为此制作小提琴吗？
我支持减少测试用例的请求（使用众多工具之一：codepen.io、jsFiddle、JS Bin 等）。
你真的应该为此提供最后的 CSS...
嗨，好的，我已经在小提琴中重现了效果：jsfiddle.net/n6EgH/1

标签： javascript jquery html image

【解决方案1】：

尝试在该 div 上绑定 mouseover，而不是 $(this).mouseover。我认为这会奏效。使用 $(this).bind('mouseover',function()..

【讨论】：

嗨，谢谢，但不高兴。在 chrome 中，事件只发生一次。第一次丢弃后，您不能再丢弃任何图像。
什么时候绑定这个事件？你会在 drop 后重新创建 img div 吗？
我将代码实现为jsfiddle.net/n6EgH/4 我尝试了您的绑定建议，但这并没有解决它。是的，我写的修复包括在每次使用后重建 drop div。但也重新绑定事件
在这里查看我的答案stackoverflow.com/questions/18684075/content-editable-div-html/…

【解决方案2】：

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

作为一种解决方法，我找到了一种解决方法，尽管它确实感觉很乱。我只是删除了 Q 中的放置区 div 并替换为新版本，并在 img 放置后反弹事件。就这样重新开始吧：S

 // 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();
                        }

http://jsfiddle.net/n6EgH/4/

【讨论】：