CODEWITHSUNDEEP
javascriptjqueryhtmlimage
user1037355
user1037355

Reputation:

content editable div html

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

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

I have the above html. There maybe a few 'dropZone' divs on the page. But each is has the following event bound:

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

The idea is simple, a user can drag and drop an image from their 'image bin' another div loaded on the page populated with some preloaded images. When the user drags an image over a 'drop zone' div the above js kicks in, if the image is from my domain then the said image is copied into the 'droppedImage' div.

This works perfectly well, but in chrome and safari the user can only do this action once. In firefix I can repeat the action endlessly. But in chome and safari is seems after one drop the attr contenteditable is lost or something?

Does anyone have any ideas?

Thanks, John

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

Upvotes: 0

Views: 384

Answers (2)

user1037355
user1037355

Reputation:

Kooilnc Your answer definitely feels right, using the drag drop behaviour, however as of yet i have yet to find the time to understand the drag drop events properly.

As a bodge fix, i have found a work around although it does feel messy. I have simply removed the drop-zone div in Q and replaced with a new version plus rebound the events after an img drop. So kind of just starting it all over again :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/

Upvotes: 0

Ankit
Ankit

Reputation: 6664

Instead of $(this).mouseover, try to bind mouseover on that div. I think this would work. Use $(this).bind('mouseover',function()..

Upvotes: 1

Related Questions