Dragged element hiding behind when using jQuery UI Draggable


I want to constrain events drag and drop to an axis, in scheduler. To do so, the function checking whether elements are editable returns false (I have an option to use free drag and drop instead too) and I handle drag and drop by ths code in timeline view (tree mode):

// Custom HTML rendering of events so 'div.draggable-event' is the custom code top element
$$('div.draggable-event').forEach(function (elt) {
	// Event id in a custom attribute
   var eventId = $(elt).readAttribute('data-event_id');
   // DHTMLX generated div is the element to drag
   var draggedElt = jQuery(elt).parent().get(0);
		axis: 'y',
		containment: '#scheduler_data',
		start: function() {
		stop: function (event, ui) {
			console.log('event dropped, TODO need to handle it now');

I have issue with dragged event hiding below the next upper/down line (div.dhx_matrix_line I think).

I’ve seen a lot of DOM elements with hidden overflow. The top-level event DOM element generated by DHTMLX has absolute positioning.

I use Scheduler 4.3.1.

Thanks for clues,

B. Post


In this case you could possibly define css rule like following:


But possibly you could achieve your goals with regular dnd.
You could handle dnd event to prevent moving it to some area.
docs.dhtmlx.com/scheduler/api__s … event.html
docs.dhtmlx.com/scheduler/api__s … event.html
docs.dhtmlx.com/scheduler/api__s … event.html

Hello Sten, thanks, it works with an additional z-index.

.dhx_matrix_line {
    overflow: visible;

.ui-draggable {

I have an additional issue but explained it in this post: viewtopic.php?f=6&t=50132&p=139142

because I really think I could do it with scheduler itself. I still hope ! Please can you help on linked post?

Thanks again.