您的位置：首页 > Web前端 > JQuery

jQuery实现DIV拖动

2014-05-07 12:57 507 查看 
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航