Disabling Image Drag (Ghost Image) - Pro Headers Navigation

[Finlando]

Hi There!

I’m creating a pretty interactive navigation, in my opinion. And I have to disable the drag function of the images in the white bar of the header. Since it is a navigation, pointer-events: none; is not an option.

Can You help me please to bring draggable=“false” to work?

I tried the folliowing CSS / JS solutions with no luck.

For the HTML solution I’m not sure in which file and how to place the code.

CSS / JS to prevent dragging of ghost image?

I would appreciate any kind of help.

[ruenel]

Hello @Finlando,

Thanks for writing in!

To resolve your issue, please edit your header and add this custom css:

.x-anchor-menu-item .x-image img {
    -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

We would loved to know if this has work for you. Thank you.

[Finlando]

Hello @RueNel,

Just pasted Your code in the Element CSS Section --> It works like a charm, except for Firefox.

Thank You.

[paul.r]

Hi,

Please add a class to your menu.

Then add this in Header > JS

jQuery(function($) {
   $( ".my-menu .x-image img" ).on( "dragstart", function() {
        return false;
   });
});

Hope that helps

[Finlando]

Hello @paul.r,

Thanks a lot for Your help.

After adding a custom class to the menu and updating Header > JS You can still drag the image in Firefox.

Thanks!

[rad]

Hi @Finlando,

Could you try this one instead of that?

jQuery(document).on("dragstart", function(e) {
     if (e.target.nodeName.toUpperCase() == "IMG") {
         return false;
     }
});

It’s from this article https://stackoverflow.com/questions/3873595/how-to-disable-firefoxs-default-drag-and-drop-on-all-images-behavior-with-jquer

Thanks!

[Finlando]

Hi @Rad,

No changes with this one.

I will hire a developer for solving this problem. I know this is far out of scope for this forum. Thanks a lot for Your time guys!

Cheers!

[christian]

You’re welcome. Consulting with a third party developer would be the best course of action for this.

Thanks.