Как мне упростить этот фрагмент JavaScript в нечто более полезное

Question

Я создал следующий ... код для проверки перетаскивания 10 объектов, но мне нужна помощь для создания любого количества перетаскиваемых объектов ... Я ищу способ динамически создавать каждое перетаскивание и бросаемый объект и фиксировать координаты для каждого в любое время ....

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); }

Answer 1

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()

Вы можете вставить код на страницу jsp и вывести len;на стороне сервера, JS просто строкипо моему мнению, вы можете задать элементам одно и то же имя класса, так что получите их по getElementsByClassName или используйте jquery или что угодно, это будет более пригодно для повторного использования

Answer 2

Исходя из вашего кода и использования трех массивов для хранения использованных вами строк, его можно изменить следующим образом:

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);}
}