Hi,
Am I missing something?
How can I add touch draggable funcitonality for the following code? This code is in creadtioncomplete, thanks!
var risk = ['Risk1','Risk2','Risk3','Risk4','Risk5','Risk6','Risk7','Risk8','Ris k9','Risk10','Risk11','Risk12','Risk13','Risk14','Risk15','Risk16'];
var Pos = [
{'x':49,'y':798},
{'x':129,'y':844},
{'x':129,'y':884},
{'x':129,'y':925},
{'x':282,'y':802},
{'x':282,'y':844},
{'x':282,'y':884},
{'x':282,'y':925},
{'x':439,'y':802},
{'x':439,'y':844},
{'x':439,'y':884},
{'x':439,'y':925},
{'x':594,'y':802},
{'x':594,'y':844},
{'x':594,'y':884},
{'x':594,'y':925}
];
var myText = ['Risk1','Risk2','Risk3','Risk4','Risk5','Risk6','Risk7','Risk8','Ris k9','Risk10','Risk11','Risk12','Risk13','Risk14','Risk15','Risk16'];
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({
start: function(e){},
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").dblclick(function(ev) {
sym.$('Risk1').draggable('disable');
}).click(function(ev) {
sym.$('Risk1').draggable('enable');
});
sym.$('Risk2').draggable({
start: function(e){},
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").dblclick(function(ev) {
sym.$('Risk2').draggable('disable');
}).click(function(ev) {
sym.$('Risk2').draggable('enable');
});
sym.$('Risk3').draggable({
start: function(e){},
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").dblclick(function(ev) {
sym.$('Risk3').draggable('disable');
}).click(function(ev) {
sym.$('Risk3').draggable('enable');
});
sym.$('Risk4').draggable({
start: function(e){},
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").dblclick(function(ev) {
sym.$('Risk4').draggable('disable');
}).click(function(ev) {
sym.$('Risk4').draggable('enable');
});
sym.$('Risk5').draggable({
start: function(e){},
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").dblclick(function(ev) {
sym.$('Risk5').draggable('disable');
}).click(function(ev) {
sym.$('Risk5').draggable('enable');
});
sym.$('Risk6').draggable({
start: function(e){},
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").dblclick(function(ev) {
sym.$('Risk6').draggable('disable');
}).click(function(ev) {
sym.$('Risk6').draggable('enable');
});
sym.$('Risk7').draggable({
start: function(e){},
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").dblclick(function(ev) {
sym.$('Risk7').draggable('disable');
}).click(function(ev) {
sym.$('Risk7').draggable('enable');
});
sym.$('Risk8').draggable({
start: function(e){},
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").dblclick(function(ev) {
sym.$('Risk8').draggable('disable');
}).click(function(ev) {
sym.$('Risk8').draggable('enable');
});
sym.$('Risk9').draggable({
start: function(e){},
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").dblclick(function(ev) {
sym.$('Risk9').draggable('disable');
}).click(function(ev) {
sym.$('Risk9').draggable('enable');
});
sym.$('Risk10').draggable({
start: function(e){},
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").dblclick(function(ev) {
sym.$('Risk10').draggable('disable');
}).click(function(ev) {
sym.$('Risk10').draggable('enable');
});
sym.$('Risk11').draggable({
start: function(e){},
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").dblclick(function(ev) {
sym.$('Risk11').draggable('disable');
}).click(function(ev) {
sym.$('Risk11').draggable('enable');
});
sym.$('Risk12').draggable({
start: function(e){},
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").dblclick(function(ev) {
sym.$('Risk12').draggable('disable');
}).click(function(ev) {
sym.$('Risk12').draggable('enable');
});
sym.$('Risk13').draggable({
start: function(e){},
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").dblclick(function(ev) {
sym.$('Risk13').draggable('disable');
}).click(function(ev) {
sym.$('Risk13').draggable('enable');
});
sym.$('Risk14').draggable({
start: function(e){},
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").dblclick(function(ev) {
sym.$('Risk14').draggable('disable');
}).click(function(ev) {
sym.$('Risk14').draggable('enable');
});
sym.$('Risk15').draggable({
start: function(e){},
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").dblclick(function(ev) {
sym.$('Risk15').draggable('disable');
}).click(function(ev) {
sym.$('Risk15').draggable('enable');
});
sym.$('Risk16').draggable({
start: function(e){},
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").dblclick(function(ev) {
sym.$('Risk16').draggable('disable');
}).click(function(ev) {
sym.$('Risk16').draggable('enable');
});
sym.getSymbol("Drop").$('Outer').droppable({
drop: function(event, ui)
{
var myVariable = sym.getVariable("symName");
sym.getSymbol(myVariable).stop("Green");
}
});
sym.getSymbol("Drop").$('Middle').droppable({
drop: function(event, ui)
{
var myVariable = sym.getVariable("symName");
sym.getSymbol(myVariable).stop("Blue");
}
});
sym.getSymbol("Drop").$('Target').droppable({
drop: function(event, ui)
{
var myVariable = sym.getVariable("symName")
sym.getSymbol(myVariable).stop("Red");
}
});
//}
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,"positio n":"absolute"})
sym.getSymbol(risk[i]).stop(0);
sym.getSymbol(risk[i]).$(risk[i]).html(myText[i]);
}
});