Drag and drop question

Hi,

Is it possible to change the colour of the tree background to ‘red’ if the user drags an item over a node which cannot be a parent or to ‘green’ if the node can be dragged?

I know there is logic to lock items which changes the background to yellow if you drag over a locked item so I wondered if there was a customised way of doing the same for user actions.

Currently I have a set of functions for all my drag and drop functionality as such:

tree.attachEvent("onDrag", canDragComplete );
tree.attachEvent("onBeforeDrag", checkNodeCanBeDragged );  
tree.attachEvent("onDrop", afterItemDropped );

function canDragComplete(sourceNodeId, targetNodeId, relativeId, sourceObject, targetObject){
    return dragAndDropRules(sourceNodeId, targetNodeId); // my custom rules
}

Where is the best place to put the colour change code? and if so what code should I use?

Thanks

Any update on this? :question:

To change tree background color you can use the following approach:

document.getElementById(“treeDivId”).style.backgroundColor = “red”;

treeDivId - the id of the container where you created a tree

Where is the best place to put the colour change code?

onDragIn event handler to set permanent color (red, green, yellow) and onDrag handler to change bg to transparent (normal state).

Thanks Alexandra!

Hi Alexandra,

When I set the background to transparent in onDrag nothing happens, the colour set inside onDragIn remains in the div. Any ideas?

tree.attachEvent("onDragIn", function(sId, tId){
var allow = !(getTreeUserData(tId, "nodetype") == "A");

if (!allow){
$("#parentId").css("background-color", "red");
}
else{
$("#parentId").css("background-color", "green");
}
});

tree.attachEvent("onDrag", function(sId, tId){
$("#parentId").css("background-color", "");
});

onDrag occurs only if you have released mouse other the valid target.

I want to implement drag and drop for each element in the array if you have a gift idea on here is a ca can have what resembles my code :

showResult function ( str ) { if ( str.length == 0) { document.getElementById (" livesearch " ) innerHTML = "" . ; document.getElementById (" livesearch " ) style.border = " 0px " . ; return; } if ( window.XMLHttpRequest ) {/ / Code for IE7 + , Firefox, Chrome, Opera , Safari xmlhttp = new XMLHttpRequest (); } else {/ / Code for IE6, IE5 xmlhttp = new ActiveXObject ( " Microsoft.XMLHTTP "); } xmlhttp.onreadystatechange = function () { if ( xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById (" livesearch " ) innerHTML = xmlhttp.responseText . ; document.getElementById (" livesearch " ) style.border = " 1px solid # A5ACB2 ." ; } } xmlhttp.open ("GET ", " resultat.php q =?" + str + " & p = < php echo $ _SESSION [' curprojet '] ; ? >" , true); xmlhttp.send (); } function init () { scheduler.locale.labels.timeline_tab = "Timeline" ; scheduler.locale.labels.section_custom = "Section" ; scheduler.config.details_on_create = true; scheduler.config.details_on_dblclick = true; scheduler.config.xml_date = "% Y-% m-% d% H :% i " ; scheduler.config.readonly_form = true; scheduler.config.wide_form = true; / / block all changes scheduler.attachEvent ( " onBeforeDrag " , function ( ) {return true;} ) scheduler.attachEvent ( " onClick " , function ( ) {return true;} ) scheduler.config.details_on_dblclick = true; scheduler.config.dblclick_create = true; / / =============== / / Set / / =============== var sections = <? php require_once ('/ / config / config_fttb_extranet.php . . . . '); $ id_projet = $ _SESSION [' curprojet '] ; $ query = mysql_query ( 'SELECT s.id_user , s.nom , s.prenom from salaried as s , p Where did projet_techs s.id_user = p.id_user AND id_projet =' . $ id_projet . 'order by s.nom ASC' ) ; while ($ fetch = mysql_fetch_assoc ($ query )) { content $ [ ] = $ fetch ; } $ how_many = count ($ content); $ i = 1; echo ' [' ; foreach ( $ content as $ item) { echo ' { "key" : "' $ item [' id_user '] . '. ", " label ": " ' $ item [ 'name' ] . ' . ' . $ item [ ' first_name ' ] . ' "} ; if ($ how_many == $ i) {echo '' ; } else {echo ' ';} $ i + + ; } echo ' ]'; / * [{ "Id" : 1, "start ": " Tue May December 2009 5:45:00 GMT +0300" , "end ": " Tue May December 2009 7:45:00 GMT +0300 ", "title ":" test "}, { " id " : 1, " start ":" Thu May 14, 2009 5:15:00 GMT +0300 " , " end ":" Thu May 14, 2009 6:45:00 GMT +0300 "," title ": " test " }] * / mysql_close ( $ connect ) ; > scheduler.createTimelineView ( { section_autoheight : true , name: " Timeline " x_unit : "minute", x_date : "% H :% i " , x_step : 30, x_size : 24, x_start : 14, x_length : 48, y_unit : sections y_property " id_user " render : "bar", dy : 15 } ) ; / / =============== / / Data loading / / =============== scheduler.config.show_loading = true; scheduler.config.first_hour = 7; scheduler.config.last_hour = 19; / / Scheduler.config.readonly = "true" ; / / Scheduler.config.readonly_form = true; scheduler.init (' scheduler_here ', new Date (), " timeline "); var calendar = scheduler.renderCalendar ( { container: " small_cal " Navigation : true , handler : function (date) { scheduler.setCurrentView (date, scheduler._mode ) ; } } ) ; scheduler.linkCalendar ( calendar ) ; scheduler.templates.event_class = function ( start, end , event) { switch ( event.status ) { case " B " : return " color_B " case " C " : return " color_C " case " D " : return " color_D " case " A" : return " color_A " case " E" : return " color_E " case " L" : return " color_g " } } scheduler.attachEvent ( " onBeforeLightbox " , function ( event_id ) { var ev = scheduler.getEvent ( event_id ) ; if ( ev.status == " B ") { scheduler.resetLightbox (); scheduler.config.lightbox.sections = [ {name: " codecmd " , height : 25, map_to : "text" , like: " textarea " , focus : false } {name: "user" , height : 25, map_to : "name" , Type : " textarea " , focus : false } {name: "address" , height : 25, map_to : "adr" Type : " textarea " , focus : false } {name: "contact", height : 25, map_to : "contact", such as: " textarea " , focus : false } {name: "comment" , height : 25, map_to " commentaireAcces " Type : " textarea " , focus : false } {name: " ot " , height : 25, map_to " railroader " Type : " textarea " , focus : false , button : " telechargerOT " } {name: "time" , height: 72 , Type : "time" , map_to : "auto" } , {name: " deplanifier " , height: 21 , Type : "select" , map_to : "status", options : [ {key : "B" , label: "Schedule" } {key : "Z" , label: " Deplanifier "} ] } , {name: " speaker " , height: 21 , Type : "select" , map_to " id_user " options : [ <? php $ x = 1; foreach ( $ content as $ item) { echo ' { "key" : "' $ item [' id_user '] . '. ", " label ": " ' $ item [ 'name' ] . ' . ' . $ item [ ' first_name ' ] . ' "} ; if ($ how_many == $ x) {echo '' ; } else {echo ' ';} $ x + + ; } > ] } ] ; scheduler.locale.labels.button_telechargerOT = " Download file"; scheduler.form_blocks.textarea.button_click = function (index, src, sec , data) { var id = scheduler.getState () lightbox_id . ; var eve = scheduler.getEvent ( id); if (( eve.cheminOT ! ='' ) && ( eve.cheminOT ! = '' ) && ( eve.cheminOT ! = ' NULL ')) { form_submit ( 'action' , ' dl ', ' fiction ' eve.cheminOT ) ; Else { } alert (' No OT upload '); } / / called on button click / / Index - index of section / / Sec - html element of section header / / Sec - html element of section editor } ; scheduler.locale.labels.section_codecmd = " dommande Code " ; scheduler.locale.labels.section_user = "Speaker affected " ; scheduler.locale.labels.section_adresse = "Address" ; scheduler.locale.labels.section_contact = " Contact" ; scheduler.locale.labels.section_commentaire = " 1 Comment " scheduler.locale.labels.section_ot = " Download OT" ; scheduler.locale.labels.section_time = " start date - end date " ; scheduler.locale.labels.section_deplanifier = " Deplanifier response " ; scheduler.locale.labels.section_intervenant = "Assign to another speaker " ; scheduler.config.buttons_right = [" dhx_custom_btn_cloture "] ; scheduler.locale.labels [" dhx_custom_btn_cloture "] = " Close Make intervention " ; scheduler.attachEvent ( " onLightboxButton " , function ( button_id , node , e) { var id = scheduler.getState () lightbox_id . ; var event = scheduler.getEvent ( id); if ( button_id == " dhx_custom_btn_cloture ") { form_submit (' share ', ' inter_update ' , 'action ', ' closing ' , 'id' , event.id ) ; } } ) ; Else { } scheduler.resetLightbox (); scheduler.config.lightbox.sections = [ {name: " codecmd " , height : 25, map_to : "text" , like: " textarea " , focus : false } {name: "user" , height : 25, map_to : "name" , Type : " textarea " , focus : false } {name: "address" , height : 25, map_to : "adr" Type : " textarea " , focus : false } {name: " comattach " , height : 60, map_to " comattachement " Type : " textarea " , focus : false } {name: " archiveclt " , height : 25, map_to " railroader " Type : " textarea " , focus : false , button : " archivect "} ] ; scheduler.locale.labels.section_codecmd = " dommande Code " ; scheduler.locale.labels.section_user = "Speaker affected " ; scheduler.locale.labels.section_adresse = "Address" ; scheduler.locale.labels.section_comattach = " Comment closing " ; scheduler.locale.labels.section_archiveclt = " Download archive closing " ; scheduler.locale.labels.button_archivect = " Archive closing " ; scheduler.form_blocks.textarea.button_click = function (index, src, sec , data) { var id = scheduler.getState () lightbox_id . ; var eve = scheduler.getEvent ( id); id.at window.open (' download.php inter_id = ? ' eve.id + + ' & file = closing '); / / called on button click / / Index - index of section / / Sec - html element of section header / / Sec - html element of section editor } ; scheduler.config.buttons_right = [" dhx_custom_btn_cloture ", " dhx_custom_btn_deplanifier "] ; scheduler.locale.labels [" dhx_custom_btn_deplanifier "] = "" scheduler.locale.labels [" dhx_custom_btn_cloture "] = ""; scheduler.attachEvent ( " onLightboxButton " , function ( button_id , node , e) { / / Var id = scheduler.getState () lightbox_id . ; / / Var event = scheduler.getEvent ( id); / / If ( button_id == " dhx_custom_btn_cloture ") { / / Alert ( event.status ) ; / / Form_submit (' share ', ' inter_update ' , 'action ', ' closing ' , 'id' , event.id ) ; / /} / / If ( button_id == " dhx_custom_btn_deplanifier ") { / / alert (" dhx_custom_btn_deplanifier "); / / Form_submit ( 'action' , ' unschedule ', ' id_inter ' event.id ) ; / /} } ) ; } return true; } ) ; scheduler.load ( " . / data / events.php id_projet = ? < php echo $ _SESSION [' curprojet '] ; ? >"); var dp = new dataProcessor ("/ data / events_update.php . "); dp.init ( scheduler ) ; dp.setTransactionMode ( "POST" ) ; scheduler.attachEvent ( " onEventChanged " , function ( event_id , event_object ) { scheduler.load ( " . / data / events.php "); return true; } ) ; / / Scheduler.attachEvent ( " onclick " change_lightbox ) ; / / Scheduler.attachEvent ( " onDblClick " change_lightbox ) ; / / Scheduler.attachEvent ( " onBeforeLightbox " change_lightbox ) ; }

Hello, achrafoo
I think you need this documentation:
docs.dhtmlx.com/scheduler/dhtmlx … ation.html