I have created the following...code to test drag and drop of 10 objects, but I need help to create any number of drag and droppable objects...I'm looking for a way to dynamically create each drag and droppable object and to capture the coords for each at all times....
var oA = document.all ? document.all["a"] : document.getElementById("a")
var oB = document.all ? document.all["b"] : document.getElementById("b")
var oC = document.all ? document.all["c"] : document.getElementById("c")
var oD = document.all ? document.all["d"] : document.getElementById("d")
var oE = document.all ? document.all["e"] : document.getElementById("e")
var oF = document.all ? document.all["f"] : document.getElementById("f")
var oG = document.all ? document.all["g"] : document.getElementById("g")
var oH = document.all ? document.all["h"] : document.getElementById("h")
var oI = document.all ? document.all["i"] : document.getElementById("i")
var oJ = document.all ? document.all["j"] : document.getElementById("j")
var fA = document.all ? document.all["fA"] : document.getElementById("fA")
var fB = document.all ? document.all["fB"] : document.getElementById("fB")
var fC = document.all ? document.all["fC"] : document.getElementById("fC")
var fD = document.all ? document.all["fD"] : document.getElementById("fD")
var fE = document.all ? document.all["fE"] : document.getElementById("fE")
var fF = document.all ? document.all["fF"] : document.getElementById("fF")
var fG = document.all ? document.all["fG"] : document.getElementById("fG")
var fH = document.all ? document.all["fH"] : document.getElementById("fH")
var fI = document.all ? document.all["fI"] : document.getElementById("fI")
var fJ = document.all ? document.all["fJ"] : document.getElementById("fJ")
Drag.init(oA, null, 0, 278, 0, 278);
Drag.init(oB, null, 0, 278, 0, 278);
Drag.init(oC, null, 0, 278, 0, 278);
Drag.init(oD, null, 0, 278, 0, 278);
Drag.init(oE, null, 0, 278, 0, 278);
Drag.init(oF, null, 0, 278, 0, 278);
Drag.init(oG, null, 0, 278, 0, 278);
Drag.init(oH, null, 0, 278, 0, 278);
Drag.init(oI, null, 0, 278, 0, 278);
Drag.init(oJ, null, 0, 278, 0, 278);
oA.onDragEnd = function(x, y) { keepDragEnd(fA, fA1, "A", x, y); }
oB.onDragEnd = function(x, y) { keepDragEnd(fB, fB1, "B", x, y); }
oC.onDragEnd = function(x, y) { keepDragEnd(fC, fC1, "C", x, y); }
oD.onDragEnd = function(x, y) { keepDragEnd(fD, fD1, "D", x, y); }
oE.onDragEnd = function(x, y) { keepDragEnd(fE, fE1, "E", x, y); }
oF.onDragEnd = function(x, y) { keepDragEnd(fF, fF1, "F", x, y); }
oG.onDragEnd = function(x, y) { keepDragEnd(fG, fG1, "G", x, y); }
oH.onDragEnd = function(x, y) { keepDragEnd(fH, fH1, "H", x, y); }
oI.onDragEnd = function(x, y) { keepDragEnd(fI, fI1, "I", x, y); }
oJ.onDragEnd = function(x, y) { keepDragEnd(fJ, fJ1, "J", x, y); }
oA.onDrag = function(x, y) { keepDragEnd(fA, fA1, "A", x, y); }
oB.onDrag = function(x, y) { keepDragEnd(fB, fB1, "B", x, y); }
oC.onDrag = function(x, y) { keepDragEnd(fC, fC1, "C", x, y); }
oD.onDrag = function(x, y) { keepDragEnd(fD, fD1, "D", x, y); }
oE.onDrag = function(x, y) { keepDragEnd(fE, fE1, "E", x, y); }
oF.onDrag = function(x, y) { keepDragEnd(fF, fF1, "F", x, y); }
oG.onDrag = function(x, y) { keepDragEnd(fG, fG1, "G", x, y); }
oH.onDrag = function(x, y) { keepDragEnd(fH, fH1, "H", x, y); }
oI.onDrag = function(x, y) { keepDragEnd(fI, fI1, "I", x, y); }
oJ.onDrag = function(x, y) { keepDragEnd(fJ, fJ1, "J", x, y); }
Based on your code, and using three arrays to hold strings you've used, it could be refactored like this:
var arr1=["a","b","c","d","e","f","g","h","i","j"];
var arr2=["fA","fB","fC","fD","fE","fF","fG","fH","fI","fJ"];
var arr3=["A","B","C","D","E","F","G","H","I","J"];
var numobjects=10;
for(i=0 to numobjects-1)
{
var o[i]=document.all?document.all[arr1[i]]:document.getElementById(arr1[i]);
var f[i]=document.all?document.all[arr2[i]]:document.getElementById(arr2[i]);
Drag.init(o[i], null, 0, 278, 0, 278);
o[i].onDragEnd=function(x, y) {keepDragEnd(f[i], f1[i], arr3[i], x, y);}
oA.onDrag=function(x, y) {keepDragEnd(f[i], f1[i], arr3[i], x, y);}
}
var arr_id = [/* the ids */];
var arr_id_f = [/* the ids */];
var len = "{$ servers output here }";/* elem numbers you want set */
function init ( ) {
var oa;
function getOnDrag ( a, b ) {
return function(x, y) { keepDragEnd(a, b, "A", x, y); }
}
for ( var i = 0; i < len; i += 1 ){
Drag.init(oa, null, 0, 278, 0, 278);
oa = document.getElementById( arr_id[i] );
oA.onDrag = oa.onDragEnd = getOnDrag ( document.getElementById( arr_id_f[i] ), /* you dont mention what should be here */oa1 );
}
}
init()
you could insert the code on a jsp page and output the len; on server side, js just strings
in my opinion,you may set the elems a same classname, so get them by getElementsByClassName
or use jquery or whatever you like, it will be more reusable
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.