js代碼：

$('#div的ID').draggable({ scroll: false });

實現例子：
1.需要移動add的彈窗，也就是整個大的div

整個大的div前端代碼如下所示：

@*add Case*@ <div id="addCase" class="modal fade" tabindex="-1" role="dialog" data-backdrop="false"aria-labelledby="addCaseHeader" aria-hidden="true"><div class="modal-dialog modal-lg"><div class="modal-content" style="width:800px"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button><h4 class="modal-title" id="addCaseHeader">Add Case</h4></div><div class="modal-body" id="addCaseContent" style="margin:0px;padding:5px">@using (Ajax.BeginForm("SaveCase", "Case", null, new AjaxOptions(){HttpMethod = "Post",OnSuccess = "completeSaveCase",OnBegin = "beginSaveCase"}, new { @class = "form-horizontal", role = "form", id = "frmAddCase", enctype = "multipart/form-data" })){@Html.AntiForgeryToken()<div class="panel panel-default"><div class="panel-heading"><input type="submit" class="btn btn-primary" value="Save" id="btnSaveCase" /><input type="reset" class="btn btn-default" value="Reset" id="btnResetAddCase" /></div><div class="panel-body"><div class="alert fade in hide" Case="alert" id="addStatusMessage"><button type="button" class="close" onclick="hideAddCaseAlert()"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button><p></p></div><div>@Html.Partial("_AddCasePartial", new CaseModel())</div></div></div>}</div></div></div> </div>

2.點擊Add按鈕，要彈出這個彈窗，把Add按鈕綁定彈出的方法showAddCaseModal()
這里的按鈕用a標簽來寫

<a href="javascript:showAddCaseModal()" class="btn btn-primary">Add</a>

3.彈出方法中，使該div可移動：

function showAddCaseModal() {hideAddCaseAlert();HideStatusMessage("statusMessage");$("#btnSaveCase").removeAttr("disabled");$("#addCase #btnResetAddCase").click();$('#addCase').modal('show'); //下面這句就是使這個div可移動$('#addCase').draggable({ scroll: false });}

總結

以上是生活随笔為你收集整理的div可拖拽移动js方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。