dhtmlxTree / Input fields in tree node while drag and drop e

Discontinued products Uncategorized discussions
#1

Hi, I was wondering why my codeparts are not working like your demo for adding / deleting items.

I tried to add form input fields like to the treeitems and it won’t work for my draggable tree. I never got focus on the input field.



I found out is that it only works if enableDragAndDrop is set to false on the tree.

Is there any way to support both: drag drop enabled AND input fields that got the focus if i click it?



as i guess the drag and drop handle is an overlay of the whole item, is there a way to limit it to the text portion of the item?



thank you for an answer on that problem



#2

When d-n-d enabled, component adds some event handlers to draggable item ( to prevent unnecessary selection and block native d-n-d behaviors of browser ), they may conflict with inline inputs.
You can add next modification to dhtmlxcommon.js

line 273
        window.dhtmlDragAndDrop.waitDrag=1;
can be replaced with
        if ((e?e.target:event.srcElement).tagName==“INPUT”) return true;
        window.dhtmlDragAndDrop.waitDrag=1;


In such case d-n-d logic will be disabled for input elements, which allow normal focus for them, while preserving correct d-n-d for text parts of elements

#3

Hi,

thank you for the fast answer. Basically this fix works, but just a little:

I used parts of your tutorial for testing


                   

                        
  • Root
                               

                                     
    • Child1
                                         

                                               
      • Child 1-1

        •                                    

                                     

      •                                
    • Child2

      •                                
    • Bold Italic

      •                            

                           

    •                    

                 


By the way, theres a small bug in dhtmlx.com/docs/products/doc … &type=smpl
the closing tag after Root should be omitted because that item is closed before the closing .

Script:
var tree = dhtmlXTreeFromHTML(‘treeboxbox_tree’);
tree.enableDragAndDrop(true);

I did the modifications on the dhtmlxcommmon as explained above.

Now, when I click that item with the textbox once and keep the mousepointer still, nothing happens.
When I move the mouse the drag-copy appears and follows the mousepointer.

When I click the item twice (keeping the pointer still) I got focus on my input field and can edit it’s content.
But when I move the mouse the drag-copy appears again but with the OLD content of the form field.
Unfortunately I can’t get rid of the dragging effect until I click outside the tree area.

So it seems that there’s some cancellation missing for the drag event after entering the input field in the tree item.
Additional when I clicked outside to start a new drag/drop process on that item the old input content is still
in the dragged copy of the item. But when I drop that item the changed/right value appears on the drop position of the item for the input field.

Hopefully you have another good and fast solution like the one before.

Thank you and best regards
4PMS

#4

GOT IT.
For the source version of dhtmlxcommon in the dhtmlxTree_pro_v16_80512\dhtmlxTree\sources folder its line 279, not 273.
Now it’s editing and draggin like a charm.

However, the edited input value will be the old one while draging after editing but shows the right value after drop.
Is there any way to fix this?

best regards
4PMS

#5

In current version, the text of draged element created from current item text, tree uses getSelectedItemText function to receive text of item, which based on innerHTML, which not include value of input.

dhtmlxtree.js , line 3220
   dhtmlXTreeObject.prototype.getSelectedItemText=function()
   {
        var str=new Array();
        for (var i=0; i<this._selected.length; i++) str[i]=this._selected[i].span.innerHTML;


I’m not pretty sure how it need to be modified to include value of input.

#6

OK, no problem - i can live with that.

thank you very much