external drag and drop Component with timeline

hi ,
i use the dhtmlxScheduler Timeline with a external drag and drop Component but the section_id
will not be displayed , it is displayed just last section id , i don’t know why ? and also the time is not right during drop .
Thanks for your time and your help!
hier my Code :

<!doctype html>

Integration with dhtmlxTree
	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;

<script type="text/javascript" charset="utf-8">
	function init() {
		if (!window.dhtmlXTreeObject) {
			alert("Sample requires dhtmlxTree");
		scheduler.locale.labels.timeline_tab = "Timeline";
		scheduler.locale.labels.section_custom = "Section";
		scheduler.config.details_on_create = false;
		scheduler.config.details_on_dblclick = false
		scheduler.config.xml_date = "%Y-%M-%D %H:%i";

		var sections = [
			{key: 1, label: "James Smith"},
			{key: 2, label: "John Williams"},
			{key: 3, label: "David Miller"},
			{key: 4, label: "Linda Brown"},
			{key: 5, label: "Linda Brown2"}

			name:	"timeline",
			x_unit:	"minute",
			x_date:	"%H:%i",
			x_step:	60,
			x_size: 10,
			x_start: 10,
			x_length:	4,
			y_unit:	sections,
			y_property:	"section_id",

		//Data loading

		scheduler.init( 'scheduler_here', new Date(), "timeline" );
		dhtmlx.message( "Drag-and-drop an item from the tree to the scheduler to create an event" );

$(function() {

	$('.drag li').on('dragstart', function(e){
		e.originalEvent.dataTransfer.setData( "dXX" , e.target.id );
	$('#scheduler_here').on( 'dragover' , function(e){
	$('#scheduler_here').on( 'drop' , function(e ){
			var p = e;
			var info = scheduler.getActionData(e);
			alert( info.date )
			alert( info.section )
			scheduler.parse({ start_date: info.date , section_id: info.section });
				{ start_date: info.date , end_date: "2009-06-30 12:00", text: "Task A-12458", section_id: 2}
			], "json");


<div id="scheduler_here"  class="dhx_cal_container"  style='width:1000px; height:100%; position:absolute; top:0px; 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="timeline_tab" style="right:280px;"></div>
		<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
	<div class="dhx_cal_header">
	<div class="dhx_cal_data">

<div style="position:absolute; top:80px; left:40px;">
	<ul class="drag">
		<li id="d1" draggable="true">Item 1 to drag</li>
		<li id="d2"  draggable="true">Item 2 to drag</li>
		<li id="d3" draggable="true">Item 3 tp drag </li>