DIV拖动效果实现

来源：互联网发布：软件定义网络典型应用编辑：程序博客网时间：2024/04/29 12:56

在这里谢谢Jquery开发者得八辈儿祖宗啊。。是他让编写JS如此之简单，不废话了。写代码，走着。

兄弟记住要引用jquery。。。。

下面是实现拖动的核心代码，想用copy到你那里，你懂得。

我地个去了，没写几篇blog不知道怎么插入代码，崩溃。。。。。。

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jqs.js"></script>
<style>
.drag{position:absolute;border:1px solid #ddd;text-align:center;padding:5px;top:100px;left:20px;cursor:move;}
.jqHandle {
   background-color:#FFF;
   height:15px;
   z-index: 100;
}

.jqDrag {
width: 100%;
cursor: move;
}

.jqResize {
   width: 15px;
   position: absolute;
   bottom: 0;
   right: 0;
   cursor: se-resize;
}
.jqDnR {
    z-index: 3;
    position: relative;
    width: 150px;
height:150px;
    font-size: 0.77em;
    color: #618d5e;
    margin: 5px 10px 10px 10px;
    padding: 1px;
    background-color: #EEE;
    border: 1px solid #CCC;
}
</style>
<title>Insert title here</title>
<script>

$(function() {

$('#ex1').jqDrag();

});
</script>
</head>
<body>

<div id="ex1" class="jqDnR">
sdfdsf
</div>
</body>
</html>

欢迎拍我。。。。。