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

Answer 2

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只是字符串
在我看来，你可以设置elems一个相同的类名，所以通过getElementsByClassName或者使用jquery或任何你喜欢的方式来获取它们，它会更加可重用

如何将此JavaScript代码段简化为更有用的内容

2 个答案: