Question

<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上拖动图像时，如果图像来自我的域，则上面的j开始播放，然后将所述图像复制到'droppedImage'div中。

这非常有效，但在chrome和safari中，用户只能执行一次此操作。在firefix中，我可以无休止地重复这个动作。但是在chome和safari之后似乎在一滴之后attr contenteditable失去了什么？

有没有人有任何想法？

谢谢，约翰

js fiddle - http://jsfiddle.net/n6EgH/1/

Answer 1

而不是$（this）.mouseover，尝试将鼠标悬停在该div上。我认为这会奏效。使用$（this）.bind（'mouseover'，function（）..

Answer 2

Kooilnc 你的答案肯定是正确的，使用拖放行为，但是我还没有找到时间来正确理解拖放事件。

作为一个bodge修复，我找到了一个解决方案，虽然它确实感到凌乱。我简单地删除了Q中的drop-zone div并替换为新版本，并在img drop之后反弹事件。所以刚刚重新开始：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/

内容可编辑div html

2 个答案: