Dragging an event from any where

Scheduler Javascript
#1

Hi -

I’ve created a custom event box without a time display using renderEvent. It’s working fairly well. The only problem is that I’d like to be able to drag the event by clicking and dragging anywhere on the event. Right now, I need to click somewhere near the top of the event, and I’m not sure how far down. I tried assigning the class “dhx_event_move” to the body of the event, hoping this would do the trick, but it didn’t make any difference.

What’s the easiest way to accomplish this?

Thanks

Ken

[code] scheduler.templates.event_class = function(start, end, event) {
return “my_event”;
};

		scheduler.renderEvent = function(container, ev, width, height, header_content, body_content) {
			var container_width = container.style.width; // e.g. "105px"

			// move section
			var html = "<div class='dhx_event_move my_event_move' style='width: " + container_width + "'></div>";

			// container for event contents
			html+= "<div class='dhx_event_move my_event_body'>";
			html += "<span>" + scheduler.templates.event_text(ev.start_date, ev.end_date, ev) + "</span>";
			html += "</div>";

			// resize section
			html += "<div class='dhx_event_resize my_event_resize' style='width: " + container_width + "'></div>";

			container.innerHTML = html;
			return true; // required, true - we've created custom form; false - display default one instead
		};

[/code]

#2

Hi Ken,

My case may not be the same as yours, but back when I wanted to be able to drag an event via the title and the body of the event, I had to modify the switch statement inside of scheduler._on_mouse_down, here’s what my switch statement currently looks like and it’s allowing me to reposition an event by dragging the title and body (the only difference is I don’t have custom event boxes though).

switch(c){ case "dhx_cal_event_line": case "dhx_cal_event_clear": if(this._table_view) this._drag_mode="move"; break; case "dhx_event_move": case "dhx_body": case "dhx_wa_ev_body": this._drag_mode="move"; break; case "dhx_event_resize": this._drag_mode="resize"; break; case "dhx_scale_holder": case "dhx_scale_holder_now": case "dhx_month_body": case "dhx_matrix_cell": case "dhx_marked_timespan": this._drag_mode="create"; this.unselect(this._select_id); break; case "": if(b.parentNode) return scheduler._on_mouse_down(a,b.parentNode); default: if(scheduler.checkEvent("onMouseDown")&&scheduler.callEvent("onMouseDown",[c])&&b.parentNode&&b!=this) return scheduler._on_mouse_down(a,b.parentNode); this._drag_id=this._drag_mode=null }

It might be worth just console logging the variables in the switch statement to see if it’s being run correctly?

Regards,
Dean

#3

Thanks Dean. Always appreciate other ways of doing things. I’d rather not modify source code, if possible.

I got it mostly working by assigning the body to class dhx_event_move and setting css for dhx_event_move class to height:100%. Now it works (at least in my Mac browsers) except for one problem - if you try to drag from a place other than the top, the top of the event jumps to location you start your drag from. Is there any way around this?

Here’s my new code:

[code] scheduler.renderEvent = function(container, ev, width, height, header_content, body_content) {
var container_width = container.style.width; // e.g. “105px”

			// move section
			var html = "";//"<div class='dhx_event_move my_event_move' style='width: " + container_width + "'></div>";

			// container for event contents				
			var bgcolor = (ev.color ? "background-color:" + ev.color + ";" : "");
			var textColor = (ev.textColor ? "color:" + ev.textColor + ";" : "");
			
			html+= "<div class='dhx_event_move dhx_body' style='padding:0px;" + bgcolor + textColor +"' >";
				// displaying event text
				html += "<span style='padding:2px;'>";
				html += scheduler.templates.event_text(ev.start_date, ev.end_date, ev) ;
				html += "</span>";
			html += "</div>";

			// resize section
			var footerClass = (! ev.readonly ? "dhx_footer" : "");
			html += "<div class='dhx_event_resize " + footerClass + "' style='width: " + container_width + "'></div>";

			container.innerHTML = html;
			return true; // required, true - we've created custom form; false - display default one instead
		};

[/code]