Hi all,

I want to drag image from calender side bar to calendar view but its getting error as

ReferenceError: drag is not defined

http://localhost:8069/web?debug=#view_type=calendar&model=vehicle.time.card.table&menu_id=232&action=316:1
Traceback:
ondragstart@http://localhost:8069/web?debug=#view_type=calendar&model=vehicle.time.card.table&menu_id=232&a

I wrote the following  code in web_fullcalendar.xml to drag the image.

<t t-name="CalendarView.sidebar.responsible">

<div t-foreach="filters" class="o_calendar_responsible" >

<t t-if="filters_value.value"><!-- don't display if no value given (or undefined) -->

<div class="o_checkbox">

<input type="checkbox" name="selection" t-att-value="filters_value.value" checked="checked" /><span/>

</div>

<t t-if="filters_value.value == -1">

<span><i class="fa fa-users fa-fw o_cal_avatar"></i></span>

</t>

<t t-if="(filters_value.value != -1) &amp;&amp; filters_value.avatar_model ">

<img t-attf-src="/web/image/#{filters_value.avatar_model}/#{filters_value.value}/image_small" class="o_cal_avatar"/>

</t>

<span t-attf-class="color_filter o_underline_color_#{filters_value.color}" ><t t-esc="filters_value.label" /></span>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img t-if="layout == current_layout"

src="/web/static/src/img/back-enable.jpg" ondragstart="drag(event)" width="50" height="50" class="oe_dashboard_selected_layout"/>

</t>

</div>

</t>

and i called ondrop="drop(event)" ondragover="allowDrop(event) and ondragstart="drag(event)" in javascript.

fullcalendar.js

function allowDrop(ev) {

ev.preventDefault();

}

function drag(ev) {

ev.dataTransfer.setData("text", ev.target.id);

}

function drop(ev) {

ev.preventDefault();

var data = ev.dataTransfer.getData("text");

ev.target.appendChild(document.getElementById(data));

}

So how to call drag and drop in javascript? Can some one correct me in writing javascipt for drag and drop?