NUI/CEF HTML5 drag disabled?

FiveM Discussion Bug reports
, , , ,
1

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

ZoyuBXK.jpg1922×1112 179 KB

While in Chrome, it works properly:

LVVQaUF.png1146×352 7.46 KB

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 Likes
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.

1 Like
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:

https://streamable.com/xyzqt

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;
		}
	});
});
1 Like
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:

1 Like
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

1 Like
9

I just tested the sample code from GitHub - msquerade/nuidrag, unfortunately, the problem still exists. Is there any chance of a solution to this problem in the future?

10

you can use JQuery draggables but afaik this is still not fixed

1 Like
11

It would be great to have this functionality. For example, Svelte framework does rely on it.

12

See above. This constraint due to Chrome’s implementation still applies, and similar concerns regarding flexibility apply in desktop browsers as well.

This is also why most real web apps implement custom dragging such as GitHub - clauderic/dnd-kit: The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React. and GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React for React, and likely others for other UI libraries as well (e.g. ‘Svelte’ as @draobrehtom mentioned has something like GitHub - isaacHagoel/svelte-dnd-action: An action based drag and drop container for Svelte, where the author even mentions “not using the browser’s built-in dnd, thanks god”, implying native dragging is a bad thing).

13

I used react-dnd and still i have the blocked icon when trying to drag. Any solution for react ?