Cannot drag and drop images after html download.

[ramachandranvenkat]

I create template with some blocks and images. once i download to html again i try to do drag and drop of images (insert/update). I do get error in the browser console as

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. I think it's because of jquery, is there any way to fix this issue?

[bago]

I don't understand the issue. Are you working on mosaico.io on your locally deployed mosaico with unchanged sources or what else?

What browser/OS are you on? Does it happen on mosaico.io? Does it happen with a different browser?

[ramachandranvenkat]

yes, i am working with mosaico, I drag and drop some images to template and save it. the next time if want to do drag image over the block i do get error and image get moved to corner of the gallery.

see the purple colored box image, i am trying to drop it, but its sits on the top left side of the gallery and i get error as below.

[bago]

Sounds like you are on custom code.

Can you reproduce it on mosaico.io? Can you reproduce it on default code downloaded from this github project? Does it happen on every template or using a specific master template?

[ramachandranvenkat]

yes, it's because of our custom code.. it's working fine in mosaico. I am trying to implement text block similar to uploaded image block, when i drag and drop text block it's should replace the existing block's text.

I try to alter parser.js with this snippet

newBinding += ", extdroppable: { options: { accept: '.image', activeClass: 'ui-state-highlight', hoverClass: 'ui-state-draghover' }, data: function (r) {r.then(function(res) { $data['" + itemBindValue + "'](res.ocrText); }, function(err) { console.error('Error', err); });}, dragged: $root.extractText }";

but i do get error as below.

scripts.min.js:3 Uncaught Error: Unable to process binding "bindIframe: function(){return $data }" Message: Unable to process binding "block: function(){return content }" Message: Unable to process binding "template: function(){return /* special */(typeof templateMode !='undefined'&& templateMode =='wysiwyg') || false ?'anonymous-59453':'anonymous-82186' }" Message: Unable to process binding "block: function(){return mainBlocks }" Message: Unable to process binding "template: function(){return { name:'block-show',foreach:blocks} }" Message: Unable to process binding "block: function(){return $data }" Message: Unable to process binding "if: function(){return titleVisible() }" Message: Unable to process binding "template: function(){return /* special */(typeof templateMode !='undefined'&& templateMode =='wysiwyg') || false ?'anonymous-83864':'anonymous-10762' }" Message: The binding 'extdroppable' cannot be used with virtual elements

can you guide me how and where should i alter the code? or is there any plugins available?

Thanks.

[ramachandranvenkat]

@bago do you have any thoughts regarding custom text blocks?

[bago]

I can't help with custom code: where's your repository?

"The binding 'extdroppable' cannot be used with virtual elements" is clear: you can't use the extdroppable binding on a virtual element but only with real elements. I guess you used it in some element that is translated to virtual in the code. If you are on data-editable you can have a look at the code handing elements with that attributes.

[ramachandranvenkat]

thanks