-
1. Re: Pls Help! Drag and Drop problem, identical symbols acting differently - same code! WHY?
Hi James,
I haven't looked at the handlers properly, but I see that there is a lot of code duplication. You can replace the code from line 42 till 332 with the following:
risk.forEach(function(r) {
// apply the draggable JQuery UI plugin to the MyDraggableSymbol symbol on your stage
sym.$(r).draggable({
start: function(e){},
drag: function(e,ui)
{
sym.getSymbol(r).stop("Initial");
sym.setVariable("symName",r);
}
}
);
//adding for risk3_orange similarly add for other symbols
sym.$(r).draggable();
sym.getSymbol(r).$(r).bind('click tap',function(ev) {
sym.$(r).draggable('disable');
}).unbind('dblclick taphold',function(ev) {
sym.$(r).draggable('enable');
});
});
Assuming that your handlers are setup correctly, it should work the same way for all the instances.
Regards,
Dharmendra
-
2. Re: Pls Help! Drag and Drop problem, identical symbols acting differently - same code! WHY?
Hi,
When you say:
//adding for risk3_orange similarly add for other symbols
Where and how do I "add similarly for other symbols"? As I dont see how the code you then list is applied to risk3_orange as 'risk3_oramge' is not mentioned in the code?
Sorry for being dumb!
Thanks
James
-
3. Re: Pls Help! Drag and Drop problem, identical symbols acting differently - same code! WHY?
Thats a copy paste issue James, it was a comment in your code. Basically, we are trying to attach the handlers for each element in your risk array represented by 'r' within the loop.
-Dharmendra
-
4. Re: Pls Help! Drag and Drop problem, identical symbols acting differently - same code! WHY?
Hi, I thought it was a copy and paste issue, but am I copying an Latin the same piece of identical code 12 times or referencing each risk ie risk1, risk2 etc within each paste and if so where within each pasted code as surely it has to reference the symbol each time??
Thanks
Sent from my iPhone
-
5. Re: Pls Help! Drag and Drop problem, identical symbols acting differently - same code! WHY?
Hi, I think I undertsand what you mean now, so the code is as below, btu I am not sure what a handler is? but some of my risks still get stuck once the text has been changed on them:
// Use for loop for attr
// deleted yepnope since you load with scropt loading
// added pos for each symbol so we can replace them there.
document.ontouchmove = function(e) {
e.preventDefault();
};
var risk = ;
var Pos = [
{'x':-9,'y':806},
{'x':27,'y':854},
{'x':72,'y':894},
{'x':71,'y':934},
{'x':231,'y':811},
{'x':231,'y':853},
{'x':231,'y':894},
{'x':231,'y':934},
{'x':388,'y':811},
{'x':388,'y':852},
{'x':388,'y':893},
{'x':388,'y':934},
{'x':543,'y':811},
{'x':543,'y':853},
{'x':543,'y':893},
{'x':543,'y':934}
];
var myText = ;
for (i=0;i<risk.length;i++){
sym.getSymbol(risk[i]).$(risk[i]).attr("contenteditable",true);
sym.$('Quadrant_text').attr("contenteditable",true);
sym.$('Quadrant1_text').attr("contenteditable",true);
sym.$('Quadrant2_text').attr("contenteditable",true);
sym.$('Quadrant3_text').attr("contenteditable",true);
}
// apply the draggable JQuery UI plugin to the MyDraggableSymbol symbol on your stage
sym.$('Risk1').draggable(,
drag: function(e,ui)
{
sym.getSymbol("Risk1").stop("Initial");
sym.setVariable("symName","Risk1");
}
}
);
//adding for risk3_orange similarly add for other symbols
sym.$('Risk1').draggable();
sym.getSymbol('Risk1').$("Risk1").bind('click tap',function(ev) {
sym.$('Risk1').draggable('disable');
}).unbind('dblclick tap',function(ev) {
sym.$('Risk1').draggable('enable');
});
sym.$('Risk2').draggable(,
drag: function(e,ui)
{
sym.getSymbol("Risk2").stop("Initial");
sym.setVariable("symName","Risk2");
}
}
);
//adding for Risk2 similarly add for other symbols
sym.$('Risk2').draggable();
sym.getSymbol('Risk2').$("Risk2").bind('click tap',function(ev) {
sym.$('Risk2').draggable('disable');
}).bind('dblclick tap',function(ev) {
sym.$('Risk2').draggable('enable');
});
sym.$('Risk3').draggable(,
drag: function(e,ui)
{
sym.getSymbol("Risk3").stop("Initial");
sym.setVariable("symName","Risk3");
}
}
);
//adding for Risk3 similarly add for other symbols
sym.$('Risk3').draggable();
sym.getSymbol('Risk3').$("Risk3").bind('click tap',function(ev) {
sym.$('Risk3').draggable('disable');
}).bind('dblclick tap',function(ev) {
sym.$('Risk3').draggable('enable');
});
sym.$('Risk4').draggable(,
drag: function(e,ui)
{
sym.getSymbol("Risk4").stop("Initial");
sym.setVariable("symName","Risk4");
}
}
);
//adding for Risk4 similarly add for other symbols
sym.$('Risk4').draggable();
sym.getSymbol('Risk4').$("Risk4").bind('click tap',function(ev) {
sym.$('Risk4').draggable('disable');
}).bind('dblclick tap',function(ev) {
sym.$('Risk4').draggable('enable');
});
sym.$('Risk5').draggable(,
drag: function(e,ui)
{
sym.getSymbol("Risk5").stop("Initial");
sym.setVariable("symName","Risk5");
}
}
);
//adding for Risk5 similarly add for other symbols
sym.$('Risk5').draggable();
sym.getSymbol('Risk5').$("Risk5").bind('click tap',function(ev) {
sym.$('Risk5').draggable('disable');
}).bind('dblclick tap',function(ev) {
sym.$('Risk5').draggable('enable');
});
sym.$('Risk6').draggable(,
drag: function(e,ui)
{
sym.getSymbol("Risk6").stop("Initial");
sym.setVariable("symName","Risk6");
}
}
);
//adding for Risk6 similarly add for other symbols
sym.$('Risk6').draggable();
sym.getSymbol('Risk6').$("Risk6").bind('click tap',function(ev) {
sym.$('Risk6').draggable('disable');
}).bind('dblclick tap',function(ev) {
sym.$('Risk6').draggable('enable');
});
sym.$('Risk7').draggable(,
drag: function(e,ui)
{
sym.getSymbol("Risk7").stop("Initial");
sym.setVariable("symName","Risk7");
}
}
);
//adding for Risk7 similarly add for other symbols
sym.$('Risk7').draggable();
sym.getSymbol('Risk7').$("Risk7").bind('click tap',function(ev) {
sym.$('Risk7').draggable('disable');
}).bind('dblclick tap',function(ev) {
sym.$('Risk7').draggable('enable');
});
sym.$('Risk8').draggable(,
drag: function(e,ui)
{
sym.getSymbol("Risk8").stop("Initial");
sym.setVariable("symName","Risk8");
}
}
);
//adding for Risk8 similarly add for other symbols
sym.$('Risk8').draggable();
sym.getSymbol('Risk8').$("Risk8").bind('click tap',function(ev) {
sym.$('Risk8').draggable('disable');
}).bind('dblclick tap',function(ev) {
sym.$('Risk8').draggable('enable');
});
sym.$('Risk9').draggable(,
drag: function(e,ui)
{
sym.getSymbol("Risk9").stop("Initial");
sym.setVariable("symName","Risk9");
}
}
);
//adding for Risk9 similarly add for other symbols
sym.$('Risk9').draggable();
sym.getSymbol('Risk9').$("Risk9").bind('click tap',function(ev) {
sym.$('Risk9').draggable('disable');
}).bind('dblclick tap',function(ev) {
sym.$('Risk9').draggable('enable');
});
sym.$('Risk10').draggable(,
drag: function(e,ui)
{
sym.getSymbol("Risk10").stop("Initial");
sym.setVariable("symName","Risk10");
}
}
);
//adding for Risk10 similarly add for other symbols
sym.$('Risk10').draggable();
sym.getSymbol('Risk10').$("Risk10").bind('click tap',function(ev) {
sym.$('Risk10').draggable('disable');
}).bind('dblclick tap',function(ev) {
sym.$('Risk10').draggable('enable');
});
sym.$('Risk11').draggable(,
drag: function(e,ui)
{
sym.getSymbol("Risk11").stop("Initial");
sym.setVariable("symName","Risk11");
}
}
);
//adding for Risk11 similarly add for other symbols
sym.$('Risk11').draggable();
sym.getSymbol('Risk11').$("Risk11").bind('click tap',function(ev) {
sym.$('Risk11').draggable('disable');
}).bind('dblclick tap',function(ev) {
sym.$('Risk11').draggable('enable');
});
sym.$('Risk12').draggable(,
drag: function(e,ui)
{
sym.getSymbol("Risk12").stop("Initial");
sym.setVariable("symName","Risk12");
}
}
);
//adding for Risk12 similarly add for other symbols
sym.$('Risk12').draggable();
sym.getSymbol('Risk12').$("Risk12").bind('click tap',function(ev) {
sym.$('Risk12').draggable('disable');
}).bind('dblclick tap',function(ev) {
sym.$('Risk12').draggable('enable');
});
sym.$('Risk13').draggable(,
drag: function(e,ui)
{
sym.getSymbol("Risk13").stop("Initial");
sym.setVariable("symName","Risk13");
}
}
);
//adding for Risk13 similarly add for other symbols
sym.$('Risk13').draggable();
sym.getSymbol('Risk13').$("Risk13").bind('click tap',function(ev) {
sym.$('Risk13').draggable('disable');
}).bind('dblclick tap',function(ev) {
sym.$('Risk13').draggable('enable');
});
sym.$('Risk14').draggable(,
drag: function(e,ui)
{
sym.getSymbol("Risk14").stop("Initial");
sym.setVariable("symName","Risk14");
}
}
);
//adding for Risk14 similarly add for other symbols
sym.$('Risk14').draggable();
sym.getSymbol('Risk14').$("Risk14").bind('click tap',function(ev) {
sym.$('Risk14').draggable('disable');
}).bind('dblclick tap',function(ev) {
sym.$('Risk14').draggable('enable');
});
sym.$('Risk15').draggable(,
drag: function(e,ui)
{
sym.getSymbol("Risk15").stop("Initial");
sym.setVariable("symName","Risk15");
}
}
);
//adding for Risk15 similarly add for other symbols
sym.$('Risk15').draggable();
sym.getSymbol('Risk15').$("Risk15").bind('click tap',function(ev) {
sym.$('Risk15').draggable('disable');
}).bind('dblclick tap',function(ev) {
sym.$('Risk15').draggable('enable');
});
sym.$('Risk16').draggable(,
drag: function(e,ui)
{
sym.getSymbol("Risk16").stop("Initial");
sym.setVariable("symName","Risk16");
}
}
);
//adding for Risk16 similarly add for other symbols
sym.$('Risk16').draggable();
sym.getSymbol('Risk16').$("Risk16").bind('click tap',function(ev) {
sym.$('Risk16').draggable('disable');
}).bind('dblclick tap',function(ev) {
sym.$('Risk16').draggable('enable');
});
sym.getSymbol("Drop").$('Outer').droppable(
});
sym.getSymbol("Drop").$('Middle').droppable(
});
sym.getSymbol("Drop").$('Target').droppable(
});
//}
sym.$('resetBtn').click(function(){
sym.$('Quadrant_text').html('Quadrant');
sym.$('Quadrant1_text').html('Quadrant');
sym.$('Quadrant2_text').html('Quadrant');
sym.$('Quadrant3_text').html('Quadrant');
for (i=0;i<risk.length;i++){
sym.$(risk[i]).css({"left":Pos[i].x,"top":Pos[i].y,"position":"absolute"})
sym.getSymbol(risk[i]).stop(0);
sym.getSymbol(risk[i]).$(risk[i]).html("Challenge");
}
});
But is still doesn't work,
Subject: Re: Pls Help! Drag and Drop problem, identical symbols acting differently - same code! WHY?
-
6. Re: Pls Help! Drag and Drop problem, identical symbols acting differently - same code! WHY?
in fact, none of them can move once their text has been edited!
-
7. Re: Pls Help! Drag and Drop problem, identical symbols acting differently - same code! WHY?
Hi James,
I haven't looked at your handlers yet. My last suggestion was to minimize the code duplication so that you get the same behavior for each instance on which it is attached.
I will take a look at it and let you know. As far as i understand, you want the instances to be draggable after the text edit is completed.
Regards,
Dharmendra
-
8. Re: Pls Help! Drag and Drop problem, identical symbols acting differently - same code! WHY?
Yes thanks, the code is much trimmer now thanks for that. The trick now is to ensure that the instances are draggable after the text is edit is completed as you say, thanks for all your help
-
9. Re: Pls Help! Drag and Drop problem, identical symbols acting differently - same code! WHY?
Hi James,
You can replace this part:
//adding for risk3_orange similarly add for other symbols
sym.$(r).draggable();
sym.getSymbol(r).$(r).bind('click tap',function(ev) {
sym.$(r).draggable('disable');
}).unbind('dblclick taphold',function(ev) {
sym.$(r).draggable('enable');
});
With this:
sym.getSymbol(r).$(r).bind('focusin tap',function(ev) {
sym.$(r).draggable('disable');
}).bind('focusout',function(ev) {
sym.$(r).draggable('enable');
});
It should give you the behavior that you need.
Regards,
Dharmendra