Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Stephen on Nov 09, 2009 08:41
open dhtmlx forum
dhtmlxLayout and dhtmlxWindows - how to confirm d-n-d?

Whats the best way of allowing confirmation of d-n-d?

Elsewhere I've used a popUp window with html content ie button with onclick calls to functions.

But I cannot use this in my drag handler tondrag() as it requires a return false/true i.e. my my drag handler popUp window with html can call cancel or ok functions but not return true/false.
Answer posted by Alex (support) on Nov 09, 2009 08:56
What drag-n-drop do you mean (what component is dragged) ? 
Answer posted by Stephen on Nov 09, 2009 10:50
Sorry cut'n'paste is not always a friend I missed off  dhtmlxTree.

I have a drag and drop handlers and want to allow confirmation of moving a tree node.
I first thought I could have a popup window in the drag handler but the handler
requires a return of true/false whereas with the popup windows I have used I have
html in the window and onclick events to call functions ie no return value.
Answer posted by Alex (support) on Nov 10, 2009 01:35

Hello, 

you can try to use confirm window to organize such a dialog. For example:

tree.attachEvent("onDrag",function(sid,tid){
   var sourceText = this.getItemText(sid);
   var targetText = this.getItemText(tid);
   return confirm("Do you want to drop item "+sourceText+" to "+targetText+" ?");

})


Answer posted by Stephen on Nov 10, 2009 02:50
No I dont want an ugly popup I want to use dhtmlxWindows
Answer posted by Alex (support) on Nov 10, 2009 03:33

The solution for using dhtmlxWindow:

<div id="content">
 Do you confirm drag-and-drop operation ?<br/>
 <input type="submit" value="Ok" onclick="confirmDD()"> <input type="submit" value="Cancel" onclick="denyDD()"> 
</div>
...
allowed = false;
var sourceId,targetId;

dhxWins = new dhtmlXWindows();
w1 = dhxWins.createWindow("w1", 20, 30, 400, 350);
w1.attachObject("content")
w1.button("close").close = function() {
 w1.hide();
}
w1.hide()

tree=new dhtmlXTreeObject(...);
...
tree.attachEvent("onDrag",function(sid,tid){
 if(!allowed){
  w1.show();
  sourceId = sid
  targetId = tid
  return false
 }
 return true
})
function confirmDD(){
 allowed = true;
 tree.moveItem(sourceId,"item_child",targetId)
 w1.hide()
}
function denyDD(){
 w1.hide()
}