jQuery实现DIV拖动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <script src="jquery-1.10.2.js"></script> <script> $(document).ready(function(){ var birthInfo = new Array(); var birthInfoLabel = new Array(); birthInfo[0] = "a1;a2;a3;a4;a5;a6;a7;a8;a9;a10"; birthInfoLabel[0] = "张一;张二;张三;张四;张五;张六;张七;张八;张九;张十"; birthInfo[1] = "b1;b2;b3;b4;b5;b6;b7;b8;b9;b10"; birthInfoLabel[1] = "李一;李二;李三;李四;李五;李六;李七;李八;李九;李十"; birthInfo[2] = "c1;c2;c3;c4;c5;c6;c7;c8;c9;c10"; birthInfoLabel[2] = "王一;王二;王三;王四;王五;王六;王七;王八;王九;王十"; $("#button1").click(function(){ $.each(birthInfo,function(k,p){ var birthInfoss = p.split(";"); alert(birthInfoss); }); }); /***********测试可拖动的DIV************/ $("#button2").click(function(){ for(var i=1;i<6;i++){ createDiv("aaa"+i,"测试数据",80+100*i,80); } }); }); /***********创建可拖动的DIV************/ function createDiv(id, label, offset_left, offset_top) { $("body").append($("<div></div>").attr("id", id).text(label)); $("#" + id).css({"position":"absolute", "cursor":"move", "border": "1px dotted #000000", "font-size":"12px"}); $("#" + id).offset({left:offset_left, top:offset_top}); $("#" + id).mousedown(function(event){ divId = $(event.target).attr("id"); $("div").css("background", "#FFFFFF"); $("#" + divId).css("background", "#eeeeee"); var offset=$("#" + divId).offset(); x1=event.clientX-offset.left; y1=event.clientY-offset.top; $(document).mousemove(function(event){ if(!isNaN(event.clientX) && !isNaN(event.clientY)) { $("#" + divId).css("left",(event.clientX-x1)+"px"); $("#" + divId).css("top",(event.clientY-y1)+"px"); } }); $("#" + divId).mouseup(function(event){ $(document).unbind("mousemove"); }); }); $(document).keydown(function(event){ var keyCodeValue = event.keyCode; var offsetValue = $("#" + divId).offset(); if(keyCodeValue == 46) { if(divId != "") { $("#" + divId).remove(); } } switch(keyCodeValue) { case 37 : $("#" + divId).offset({left:(offsetValue.left - 1)}); break; case 38 : $("#" + divId).offset({top:(offsetValue.top - 1)}); break; case 39 : $("#" + divId).offset({left:(offsetValue.left + 1)}); break; case 40 : $("#" + divId).offset({top:(offsetValue.top + 1)}); break; } }); } </script> </head> <body> <button id="button1">button1</button> <button id="button2">button2</button> </body> </html>