jQuery Mobile是一個(gè)基于jQuery的移動(dòng)應(yīng)用程序框架，它提供了一套易于使用的API，使開發(fā)移動(dòng)應(yīng)用程序變得更加簡(jiǎn)單和直觀。其中一個(gè)重要的功能就是拖動(dòng)，使用拖動(dòng)可以讓用戶更加方便地交互操作。下面我們來了解一下如何在jQuery Mobile中使用拖動(dòng)。

$(document).on("pagecreate", "#pageId", function() {
$( "#draggable" ).draggable();
});
<div id="draggable" class="ui-widget-content">
<p>我可以被拖動(dòng)</p>
</div>

上面的代碼演示了如何使用jQuery UI的draggable方法，將一個(gè)元素加上拖動(dòng)功能。首先在頁面創(chuàng)建時(shí)，我們綁定了一個(gè)事件，此事件會(huì)將id為pageId的頁面中，id為draggable的元素變成可拖動(dòng)元素。在HTML中，我們定義了一個(gè)div元素，它有一個(gè)id為draggable，并且顯示出來的內(nèi)容是一個(gè)p標(biāo)簽內(nèi)的文字。整個(gè)過程非常簡(jiǎn)單，只需要將要拖動(dòng)的元素指定一個(gè)id，并調(diào)用draggable方法即可。

另外，jQuery Mobile還提供了其他一些有用的拖動(dòng)功能，例如通過指定data屬性，可以將拖動(dòng)的元素存儲(chǔ)在其他元素中。下面的代碼演示了如何在拖動(dòng)時(shí)同時(shí)將數(shù)據(jù)存儲(chǔ)在data屬性中：

$("#draggable").draggable({
helper: "clone",
revert: "invalid",
start: function(event, ui) {
$(ui.helper).addClass("ui-draggable-helper");
//將數(shù)據(jù)存儲(chǔ)在data屬性中
$(ui.helper).data("task", {id: taskId, title: taskTitle});
}
});
$("#droppable").droppable({
drop: function(event, ui) {
//獲取存儲(chǔ)在data屬性中的數(shù)據(jù)
var task = $(ui.draggable).data("task");
alert("ID為" + task.id + "的任務(wù)已經(jīng)被移動(dòng)到" + $(this).text() + "欄目下。");
}
});
<div id="draggable" class="ui-widget-content">
<p>我可以被拖動(dòng)</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>我是一個(gè)可放置的區(qū)域</p>
</div>

在上面的代碼中，我們使用了draggable方法和droppable方法。在draggable方法中，我們指定了一個(gè)helper為clone，這意味著在拖動(dòng)中會(huì)生成一個(gè)copy，原先的元素不會(huì)被改變。另外，我們?cè)趕tart事件中，將數(shù)據(jù)存儲(chǔ)在data屬性中。在droppable方法中，我們綁定了一個(gè)drop事件，當(dāng)拖動(dòng)元素在droppable區(qū)域中放下時(shí)，就會(huì)觸發(fā)這個(gè)事件。我們?cè)谑录校褂胐ata方法獲取存儲(chǔ)的數(shù)據(jù)，并進(jìn)行相應(yīng)的處理。

總之，拖動(dòng)是一個(gè)非常常用的功能，使用jQuery Mobile的拖動(dòng)功能可以讓開發(fā)者輕松實(shí)現(xiàn)這個(gè)功能，并且還提供了多種高級(jí)功能，可以滿足不同需求。