[Question] Drag & Drop and Context Menu

[graphefruit]

Hello!
First of all: A very nice framework and very good to use.
I've stumbled across a small issue and I don't know how to exactly fix it.

I need to enable Drag & Drop aswell as the context-menu on a Smartphone, the problem is, when I want to drag and drop, I need to hold 3-4 seconds until I can drag the node to another node, but then the context menu pops up and its very confusing.
Sometimes the context-menu shows up but I still cant drag & drop the nodes.

Would it be possible to drag and drop the nodes after holding for 200 ms, and when then finger moves the context-menu is canceled, otherwise the context menu shows up after 1 or 2 seconds?
Is there any code part I could grab into, or would I need to grab into the framework myself?

Thanks in advance
Graphefruit
Update:
I've made a small gif (made inside chrome smartphone emulation)

[vakata]

Hello,

This is very odd - there should be no need to hold for 3-4 seconds and the contextmenu should be canceled - which jstree version are you using and what is the device you have problems with?

I just tested on a HTC One m8 (android 5), iPhone 6s and MS 950 - I used the demos on jstree.com.

[graphefruit]

Hello,
thanks for you feedback!
I'm using this version: /*! jsTree - v3.3.3 - 2016-10-31 - (MIT) */
I've tested it on an HTC One M8 aswell ;) (but android 6.0 - vanilla)

The GIF I'm showing you was with my own project (angular-material, angularjs (1.0))
I've tested it also on jstree.com, with the same behavior

Funny the Item sometimes worked, sometimes not, folder never worked.

[graphefruit]

You got a thought here @vakata ?
Thanks & Greetings
Graphefruit

[graphefruit]

Some good news @vakata ,
I've digged a bit into the framework and found two fixes, maybe you could have a general look on it:
On the context-menu side, i've changed the "touchmove" event:

.on('touchmove.vakata.jstree', function (e) {
	if(cto && e.originalEvent && e.originalEvent.changedTouches && e.originalEvent.changedTouches[0] && (Math.abs(ex - e.originalEvent.changedTouches[0].clientX) > 5 || Math.abs(ey - e.originalEvent.changedTouches[0].clientY) > 5)) {
		clearTimeout(cto);
		$.vakata.context.hide();
	}
})

The movement was changed from 50 to 5px, and when this event triggers the context shall hide.
Thats specially a problem when you press, the menu is shown, but also DND is enabled now.

Second in the DND-Plugin I changed the settings variable to:

$.vakata.dnd = {
	settings : {
		scroll_speed		: 10,
		scroll_proximity	: 20,
		helper_left			: 5,
		helper_top			: 10,
		threshold			: 5,
		threshold_touch		: 5
	},

Here you see I also changed threshold_touch to 5.

That fixes the problem that if you're not moving your finger 50px the dnd isn't triggered at all.

So after this is fixed and the 2 plugins working nice together on my side now I've came across the wholedraw-plugin.
I couldn't dig to much into it, but I found out that DND isn't working if you Drag the wholedraw-selection.
If you select the text-node it's working.

On the other hand the context-menu is shown on the wholedraw selection.

Any ideas where I could grab in?

Thanks
Graphefruit

[vakata]

Thank you for digging in - I will be able to merge the solution in a few hours, but I will probably modify it a bit - threshold_touch should not be very low, as some times just tapping on a phone may trigger a touchstart, touchmove and touchend events (fat fingers). I will run a few tests and see if I can find a more reasonable value (50px is probably too much).

As for dragging with wholerow active - check these settings:
https://www.jstree.com/api/#/?q=large

[graphefruit]

@vakata Thank you, missed it while digging in the API - I gonna give it a try later on.

While we're on the DND-Topic:
I've a little UI-Problem while Drag & Drop.
The problem is, when you're dragging the item with your mouse it doesn't make any problems at all, you can see everything, but if you're dragging with your thumb the problem is, that the node which is cloned isn't good visible:

I've moved the item text to the upper left above the thumb instead of the right lower corner, because the thumb overlaps the text and you can't see the cloned element.

For this i grabbed into the vakata_dnd.helper:

vakata_dnd.helper.css({
	left	: hl/2 + "px",
	top		: ht - 75 + "px"
});

Update: This works truely just if you've enough space on top (like I do on my application)
And in the CSS:

#jstree-marker {
  position: absolute;
  top: 0;
  left: 0;
  margin: -10px 0 0 0;
  padding: 0;
  border-right: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
}

I've mad here the arrow 5px larger:

So maybe the API can be changed a little bit to grab into the helper element to add your own offset?

Update:
https://www.jstree.com/api/#/?q=large -> Works like a charm! Thanks

[graphefruit]

Update:
If I'm activating: large_drag_target: true the context-menu cant be shown anymore. The event is triggered but it won't get displayed.

large_drop_target: true - isn't the problem.

Update2:
A small fix:

if ($(e.currentTarget).is("li"))
{

	$($(e.currentTarget).find("a")[0]).trigger('contextmenu', true);
}
else
{
	$(e.currentTarget).trigger('contextmenu', true);
}

The problem with this is that if wholedraw is activated, the context-menu is just showing when long-pressing on the text, not on the whole-element.

[rvwhitney]

Hi @vakata - we are using jstree for projects that require both drag and drop and context menu to update the folder names. the problem I am having is that in certain instances the context menu does not appear at all, and in other instances the z-index seems to be way too low to actually touch the menu. I gather from the above comments that dnd and context are probably compatible, correct? Where (what selector) should I add z-index:90000 to? Thank you!

[rvwhitney]

jstree-contextmenu :)

[amarkumarram]

@vakata @graphefruit

How to customize the color of indicator icon in #jstree-marker?

Thanks in advance.

[vivekcheerla]

This icon is bit tricky, is the a way that we can have clear indication like Jq tree.
Its shows a line in between two nodes when we are dropping in between nodes and border around the node if we are dropping it into a node.