Bootstrap 3列拖拽布局带JSON导出：本地拖拽功能失效求助

Hey there! Let's walk through building exactly what you need step by step—since you're new to Bootstrap and jQuery UI, I'll keep things clear and straightforward so you can get it running locally without issues.

1. Fix the Dependencies First (This is why your local drag-and-drop broke!) #

The most common reason the JSFiddle example fails locally is incorrect dependency order or missing files. Make sure you include these in the right order in your HTML (you can use CDNs or download the files to your local project):

<!-- Load in this exact order -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-ui-dist@1.13.2/jquery-ui.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-dist@1.13.2/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

2. Build the 3-Column Layout with Draggable Elements #

We'll use Bootstrap's grid system for the 3-column structure, and add draggable items (text inputs and radio buttons) inside each column. Each column will have a sortable container to enable cross-column dragging:

<div class="container mt-4">
  <div class="row">
    <!-- Column 1 -->
    <div class="col-4">
      <h5>Column 1</h5>
      <div class="sortable list-group">
        <div class="draggable-item list-group-item">
          <label>Text Input 1:</label>
          <input type="text" class="form-control mt-1" data-item-id="text-1" placeholder="Enter content">
        </div>
        <div class="draggable-item list-group-item">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="radio-group" id="radio1" value="option1">
            <label class="form-check-label" for="radio1">Option 1</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="radio-group" id="radio2" value="option2">
            <label class="form-check-label" for="radio2">Option 2</label>
          </div>
        </div>
      </div>
    </div>

    <!-- Column 2 -->
    <div class="col-4">
      <h5>Column 2</h5>
      <div class="sortable list-group">
        <div class="draggable-item list-group-item">
          <label>Text Input 2:</label>
          <input type="text" class="form-control mt-1" data-item-id="text-2" placeholder="Enter content">
        </div>
      </div>
    </div>

    <!-- Column 3 -->
    <div class="col-4">
      <h5>Column 3</h5>
      <div class="sortable list-group">
        <div class="draggable-item list-group-item">
          <label>Text Input 3:</label>
          <input type="text" class="form-control mt-1" data-item-id="text-3" placeholder="Enter content">
        </div>
      </div>
    </div>
  </div>

  <!-- Export Button & Result Area -->
  <div class="mt-4">
    <button id="export-btn" class="btn btn-primary">Export Text Input Data</button>
    <pre id="export-result" class="mt-2 p-2 bg-light border rounded"></pre>
  </div>
</div>

3. Add Drag-and-Drop & Export Functionality with jQuery UI #

Use jQuery UI's sortable method to enable cross-column dragging, and add a click handler for the export button to collect all text input values and the selected radio option:

$(document).ready(function() {
  // Initialize drag-and-drop sorting
  $(".sortable").sortable({
    connectWith: ".sortable", // Allow dragging between all sortable columns
    revert: true, // Smooth animation when dropping items
    handle: ".draggable-item", // Restrict drag trigger to the item itself
    placeholder: "list-group-item placeholder" // Style for the drop placeholder
  }).disableSelection(); // Prevent text selection while dragging

  // Handle export button click
  $("#export-btn").click(function() {
    const exportData = {};

    // Collect all text input values
    $("input[type='text']").each(function() {
      const itemId = $(this).data("item-id");
      const value = $(this).val();
      exportData[itemId] = value || "Empty";
    });

    // Collect selected radio button value
    const selectedRadio = $("input[name='radio-group']:checked").val();
    exportData["selected-radio-option"] = selectedRadio || "No option selected";

    // Display results (or uncomment the code below to download as a JSON file)
    $("#export-result").text(JSON.stringify(exportData, null, 2));

    // // Uncomment to download as JSON file:
    // const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportData, null, 2));
    // const downloadLink = document.createElement('a');
    // downloadLink.setAttribute("href", dataStr);
    // downloadLink.setAttribute("download", "form-data.json");
    // document.body.appendChild(downloadLink);
    // downloadLink.click();
    // downloadLink.remove();
  });
});

4. Add CSS for Better Drag-and-Drop UX #

Add this to your stylesheet to make the drop placeholder more visible:

.placeholder {
  background-color: #e9ecef;
  border: 2px dashed #adb5bd;
}

Why Did the Original JSFiddle Fail Locally? #

Chances are it was one of these issues:

• You loaded dependencies in the wrong order (jQuery must come before jQuery UI)
• You missed a required file (like jQuery UI's CSS)
• You had incorrect file paths for local copies of the libraries

This setup will work perfectly locally—just copy all the code into an HTML file, open it in a browser, and you'll have:

• A responsive 3-column layout
• Draggable text inputs and radio button groups that work across columns
• An export button that shows (or downloads) all text input values and the selected radio option

内容的提问来源于stack exchange，提问作者user5404829