Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by John Watson on Sep 12, 2008 07:52
open dhtmlx forum
Conditions on tree item drag

I would like to have some conditioning when I drag an item onto the tree or from within the tree. So that when I drag I can then have a menu show with the user clicking on an option, such as:

1. Move it
2. Create a link to this item

For instance, I have pages shown as the tree with HOME as the top node then subpages coming off the tree as sub nodes, I then want to be able to drag a page and drop on another page and have the 2 options.

Is there away, using tree.setDragHandler(check_func) where i can run some conditional code which includes user input which passes data back (like 1 = move, 2 = create link) to the processor page?

Any help would be great!

Thanks

John
Answer posted by Support on Sep 12, 2008 08:36
>>user input which passes data back (like 1 = move, 2 = create link) to the processor page?

There is no way to show some additional form without breaking current js tread. But you block default d-n-d operation , show custom form and based on result of selection - do the necessary action 
var data=[];
tree.attachEvent("onDrag",function(sid,tid){
    data = [sid,tid]; //store details
     show_form();
     return false;
}

show_form - show custom form and when some options selected it uses tree.moveItem(... with params based on data stored from onDrag event.
Answer posted by John Watson on Sep 12, 2008 10:05
I have created this code which quite simply uses a confirm box  and then if link then submits form.

tree.setDragHandler(check_func);
     
      function  check_func(id_drag, id_landing){
        // This checks for new items that are dragged onto tree
        if (id_drag=="newpage" || id_drag=="newelink") {
        return true;
        } else {
        //  record dragged data and then
        document.getElementById("id_drag").value=id_drag;
        document.getElementById("id_landing").value=id_landing;
        // get user confirmation on what is needed
        if (confirm("Create link to this page?\nClick OK to create link\nClick Cancel to move")) {
            // If OK then create link by submitting form
            document.getElementById("siteeditform").submit();
            return false;
            } else {
            // move item
            return true;
            }
       }
     }

problem is, that it runs the confirm box twice. I cant work out why - any ideas?

John
Answer posted by Support on Sep 12, 2008 10:30
Cofirm box is modal, so it can be used from events, without breaking js thread. 

>>problem is, that it runs the confirm box twice. I cant work out why - any ideas?
The similar code works correctly in local samples. Most probably it somehow triggered by form sending. Try to update code as 

if (confirm("Create link to this page?\nClick OK to create link\nClick Cancel to move")) {
  // If OK then create link by submitting form
   window.setTimeout(function(){ document.getElementById("siteeditform").submit(); },1);

It will separate form submit from d-n-d process and must resolve issue.

Answer posted by John Watson on Sep 12, 2008 10:48
Apologies, it was because I had two setDragHandler events! it works fine now.