拖拽功能-jquery
生活随笔
收集整理的這篇文章主要介紹了
拖拽功能-jquery
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
.nav {
width: 200px;
height: 200px;
border: 1px solid black;
}
.title {
width: 100%;
height: 20px;
background-color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div class="nav">
<div class="title">hello 主人 拖我試試看</div>
<div>
我是內(nèi)容。。。。
</div>
</div>
<script src="../plugins/jquery/jquery-1.10.1.min.js"></script>
<script src="../plugins/jquery/jquery-ui.min.js"></script>
<script src="../plugins/jquery/jquery.ui.touch-punch.js"></script>
<script>
$(".nav").draggable({
handle: ".title"
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
.nav {
width: 200px;
height: 200px;
border: 1px solid black;
}
.title {
width: 100%;
height: 20px;
background-color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div class="nav">
<div class="title">hello 主人 拖我試試看</div>
<div>
我是內(nèi)容。。。。
</div>
</div>
<script src="../plugins/jquery/jquery-1.10.1.min.js"></script>
<script src="../plugins/jquery/jquery-ui.min.js"></script>
<script src="../plugins/jquery/jquery.ui.touch-punch.js"></script>
<script>
$(".nav").draggable({
handle: ".title"
});
</script>
</body>
</html>
轉(zhuǎn)載于:https://www.cnblogs.com/lqw007/p/7676537.html
總結(jié)
以上是生活随笔為你收集整理的拖拽功能-jquery的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： hello程序的运行过程-从计算机系统角
- 下一篇： HTTPS 通俗简介