jquery - 启用 禁用 JQuery 可拖动

Question

我正在制作一个打印表单，它将允许管理员用户更改打印表单的布局所以我选择 JQuery Dragable 来完成这项工作，它工作正常，但是当启用或禁用 HTML 中可拖动的第一个元素，在禁用可拖动时采用禁用样式，其他元素保持原始外观我正在使用 IE 8 。我在 Fierfox 和 Chrome 上运行代码，结果是所有元素都更改其样式以禁用样式。我需要 Elemnet 来保留原来的 Stayl

function EnableDragAndDrop(cBox) {
    $("#divDoB").draggable({ disabled: cBox.checked });
    $("#divNationalNo").draggable({ disabled: cBox.checked });
    $("#divSex").draggable({ disabled: cBox.checked });
    $("#divPlaceOfBirth").draggable({ disabled: cBox.checked });
    $("#divIssueDate").draggable({ disabled: cBox.checked });
    $("#divMotherName").draggable({ disabled: cBox.checked });
    $("#divExpDate").draggable({ disabled: cBox.checked });
    $("#divAuthority").draggable({ disabled: cBox.checked });
   $("#divPassportHolderName").draggable({ disabled: cBox.checked });

}

Answer 1

如果您只提供相同的 ID，而不是使用 ID <div>元素是一个类，例如 class="draggable"您可以将其缩短，如下所示:

function EnableDragAndDrop(cBox) {
  $(".draggable").draggable(cBox.checked ? "disable" : "enable");
}
$(function() {
  $(".draggable").draggable({ containment: '#divDragArea', scroll: false });
});

而不是 {disable: boolean}您只需调用 "enable" 或 "disable" 方法，这取决于是否选中该框。作为旁注，您可以在单个 $(function() { }); 中放置任意数量的内容。包装器，您不需要为每个语句一个包装器:)