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

有没有人有任何想法？

谢谢，约翰

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

4

2 回答 2

0

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

于 2013-09-08T13:46:37.943 回答
0

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

作为一个bodge修复，我找到了一个解决方法，虽然它确实感觉很乱。我只是删除了 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/

于 2013-09-09T08:24:35.213 回答