how to drag item from list and drop to scheduler

Scheduler Javascript
#1

Hi,

I want to drag item from dhtmlXList to scheduler. I tried with the follwing approach but didn’t got success : -

myList.attachEvent(“onBeforeDragIn”, function (context, ev){
// your code here
console.log(‘hello 1’);
dragIn = 1;
listText = context.from.get(context.source[0]).Maintainer;
return true;
});

		myList.attachEvent("onMouseOut", function (context, ev){
		if(dragIn == 1){
			
//scheduler.getPosition is custom method which should returns when mouse up occur
			var pos = scheduler.getPosition();
			console.log('scheduler get mouse Position after dragging :::: ' +pos.x + ',' + pos.y );
			var eventId = scheduler.addEvent({
			start_date: scheduler._get_date_from_pos(pos),
			end_date: scheduler._get_date_from_pos(pos),
			text: listText ,
			section: "4"
			});

			scheduler.showEvent(eventId);
			
			dragIn = 0;
			}
			
		return false;
		
		});

I have defined a global variable “mousePosition” inside my js file and updated when mouse up event occurs as follows : -

scheduler._on_mouse_up1111=function(e,source){
console.log(‘inside_on_mouse_up1111’ + source);
var pos=this._mouse_coords(e);
mousePosition = pos;
return pos;
}

scheduler.getPosition=function(){

return mousePosition;

}

mouse up event occurs and write to the log when not got exact position, sometimes “undefined”.

Please help, as there may be another simple approach from which we can handle drag item from “list” and drop to scheduler.
I also tried to use: -
scheduler.attachEvent(“onExternalDragIn”, function(id, source, event){
console.log(‘inside onExternalDragIn’);
return true;
});

but the above code does not run (please share any idea to run onExternalDragIn)

#2

Hello.

To use “onExternalDragIn” you should add dhtmlxscheduler_outerdrag.js extension to your page.
See article:
docs.dhtmlx.com/scheduler/dhtmlx … ation.html

For example, something like following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Drag List</title>

    <script src="lib/dhtmlxScheduler/sources/dhtmlxscheduler.js"></script>
    <script src="lib/dhtmlxScheduler/sources/ext/dhtmlxscheduler_outerdrag.js"></script>
    <link rel="stylesheet" href="lib/dhtmlxScheduler/dhtmlxscheduler.css">

    <script src="lib/dhtmlxSuite/dhtmlx.js"></script>
    <link rel="stylesheet" href="lib/dhtmlxSuite/dhtmlx.css"/>

    <style type="text/css" media="screen">
        html, body {
            margin: 0px;
            padding: 0px;
            height: 100%;
            overflow: hidden;
        }

        #scheduler_here {
            background-color: white;
            border-left: 1px solid #EBE9E9;
            border-right: 1px solid #EBE9E9;
        }

    </style>
</head>
<body onload="init();">
<div id="listbox" style="position:absolute; top:0; left:0; width:250px; height:100%;"></div>
<div id="scheduler_here" class="dhx_cal_container"
     style='width:1000px; height:100%; position:absolute; top:0; left:250px'>
    <div class="dhx_cal_navline">
        <div class="dhx_cal_prev_button">&nbsp;</div>
        <div class="dhx_cal_next_button">&nbsp;</div>
        <div class="dhx_cal_today_button"></div>
        <div class="dhx_cal_date"></div>
        <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
        <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
        <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
    </div>
    <div class="dhx_cal_header">
    </div>
    <div class="dhx_cal_data">
    </div>
</div>
<script>
    function init(){
        var list = new dhtmlXList({
            container: "listbox",
            type:{
                template:"#Package# : #Version#<br/>#Maintainer#"
            },
            drag: true
        });

        list.add({
            Package:"test one",
            Version:"0.1",
            Maintainer:"dhtmlx"
        });

        list.add({
            Package:"test two",
            Version:"0.2",
            Maintainer:"dhtmlx"
        });

        list.add({
            Package:"test three",
            Version:"0.1",
            Maintainer:"dhtmlx"
        });
        dhtmlx.compat("dnd");

        scheduler.attachEvent("onExternalDragIn", function(id, source, e) {
            var listItem = list.get(source.parentObject.id);
            scheduler.getEvent(id).text = listItem.Package + " " + listItem.Version;
            return true;
        });


        scheduler.init('scheduler_here', new Date(2014, 5, 30), "week");
        scheduler.parse([
            { start_date: "2014-06-30 09:00", end_date: "2014-06-30 12:00", text: "Task A-12458", section_id: 1},
            { start_date: "2014-06-30 10:00", end_date: "2014-06-30 16:00", text: "Task A-89411", section_id: 1},
            { start_date: "2014-06-30 10:00", end_date: "2014-06-30 14:00", text: "Task A-64168", section_id: 1},
            { start_date: "2014-06-30 16:00", end_date: "2014-06-30 17:00", text: "Task A-46598", section_id: 1},

            { start_date: "2014-06-30 12:00", end_date: "2014-06-30 20:00", text: "Task B-48865", section_id: 2},
            { start_date: "2014-06-30 14:00", end_date: "2014-06-30 16:00", text: "Task B-44864", section_id: 2},
            { start_date: "2014-06-30 16:30", end_date: "2014-06-30 18:00", text: "Task B-46558", section_id: 2},
            { start_date: "2014-06-30 18:30", end_date: "2014-06-30 20:00", text: "Task B-45564", section_id: 2},

            { start_date: "2014-06-30 08:00", end_date: "2014-06-30 12:00", text: "Task C-32421", section_id: 3},
            { start_date: "2014-06-30 14:30", end_date: "2014-06-30 16:45", text: "Task C-14244", section_id: 3},

            { start_date: "2014-06-30 09:20", end_date: "2014-06-30 12:20", text: "Task D-52688", section_id: 4},
            { start_date: "2014-06-30 11:40", end_date: "2014-06-30 16:30", text: "Task D-46588", section_id: 4},
            { start_date: "2014-06-30 12:00", end_date: "2014-06-30 18:00", text: "Task D-12458", section_id: 4}
        ], "json");
    }
</script>

</body>
</html>
#3

I tried but drag from list and drop to scheduler does not working.

#4

I tried with the suggested approach, but it is not working.
Please find attached file.
testing1.zip (1.39 KB)

#5

Hello.

Try sample from attachment.
In your sample it seems like you haven’t added all necessary js files and there are errors in console.
DragFromListToScheduler.zip (3.28 MB)

#6

Seems this attached example is for v4.6 … when using v5.0 Suite drag source has no parentObject. Can u provide solution?

#7

Hello.
I’ve just replaced suite in sample from previous post and it seems like it works.
DragFromListToScheduler_Suite_v5.zip (1.84 MB)