jQuery Mobile是一款用于開發移動端網頁和應用的JavaScript框架，它提供了豐富的組件和交互效果，為移動端開發提供了很大的便利。其中，div拖動是jQuery Mobile中常用的一種交互效果，本文將介紹如何使用jQuery Mobile實現div拖動效果。
首先，在HTML文件中引入jQuery Mobile的樣式文件和JavaScript文件。代碼如下：
<link rel="stylesheet" /> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>然后，在body標簽中添加一個div元素，并設置它的id和class屬性。代碼如下：
<div id="drag" class="ui-widget-content">Drag me</div>接著，使用jQuery的draggable方法來實現div的拖動效果。代碼如下：
<script>
$("#drag").draggable();
</script>最后，我們需要在CSS文件中對拖動的div進行樣式設置。代碼如下：#drag {
width: 100px;
height: 100px;
background-color: #ccc;
border: 1px solid #666;
text-align: center;
line-height: 100px;
}這樣，我們就完成了一個簡單的div拖動效果。整個代碼如下：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Drag</title>
<link rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
#drag {
width: 100px;
height: 100px;
background-color: #ccc;
border: 1px solid #666;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="drag" class="ui-widget-content">Drag me</div>
<script>
$("#drag").draggable();
</script>
</body>
</html>總之，div拖動是一種常見的交互效果，它可以為移動端網頁和應用提供更好的用戶體驗。而使用jQuery Mobile實現div拖動效果是一個快速和簡單的方法，只需要幾行代碼就可以實現。