NUI/CEF HTML5 drag disabled?

nui
cef
drag
drop
html5

#1

Cannot make use of HTML5 built-in drag/drop. Only the “dragstart” event fires while inside FiveM:

While in Chrome, it works properly:

But then I noticed that you cannot select text or images at all while in FiveM, and dragging them around, as if user-select: none is applied to everything permanently.

Demo resource here: https://github.com/msquerade/nuidrag

Is there a possibility dragging & dropping with HTML5 can be enabled for FiveM?


#2

Hello,

I have the same problem… News for that :slight_smile: ?

Thanks in advance !


#3

This can’t be resolved as CEF relies on the OS implementation for dragging/dropping in these events (as they can also drag files to the OS itself), which won’t work for full-screen D3D applications.

Perhaps this can be resolved when/if we get rid of fullscreen mode, but this is unlikely due to weird drivers on user devices.


#4

… actually, using AttachThreadInput causes DoDragDrop to not block - one won’t see any overlay from the dragged object (as this would be another child window), but dragging itself seems to work and not block the game like this.


#5

I don’t know if this is still relevant but I did a workaround for drag/drop simulation for one of my projects. It is pretty simple actually and works quite well. Here is a showcase of it:

I simply assigned a mouseDown event to the draggable object and when it is fired, I assigned that object to a variable. I also assigned mouseUp events to the droppable places. And there is also an invisible div, which moves itself to the mouse location, if there is an object which is currently being dragged. Here is an example code representation of it.

$(function(){
	var beingDragged = null;
	
	$('#draggableObject').on('mousedown', function(){
		console.log($(this).attr('id') + " is being dragged!");
		beingDragged = $(this);
	});


	$(document).on('mouseup', function(){
		var id = $(this).attr('id');
		if (beingDragged != null && id == 'droppableDiv'){
			console.log(beingDragged.attr('id') + " was dropped!");
			beingDragged = null;
		}
	});
});

#6

You cab use jQuery .draggable to make an element draggable. Works fine for me win 10.


#7

That looks sick.Can you share it? :smiley:


#8

It’s not so much of a workaround, but rather an alternative (older) method of doing it. The HTML5 way is just way more responsive than conventional Javascript or jQuery (or at least it feels that way inside of browsers). It would be really neat to have support for it. If that means the overlay is not visible – that is fine I would imagine, one could always emulate that with Javascript.

Edit: Support added in March 15 update