拖拽后无法调整元素大小及保存位置问题求助

Hey there! Let's tackle your two issues one by one—getting resizing working and saving those element positions/sizes.

First, make sure you've included jQuery and jQuery UI in your project (since .resizable() is a jQuery UI method). Add these to your <head> section if you haven't already:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

The key is to call .resizable() right after the element is added to your drop target. Here's how to integrate it into your drop event handler:

// Example drop event handler (adjust to match your existing code)
$(document).on("drop", "#your-drop-area-id", function(event) {
  event.preventDefault();
  var draggedElementData = event.originalEvent.dataTransfer.getData("text");
  
  // Clone or create the element you're dropping
  var $newElement = $(draggedElementData).clone();
  
  // Set initial position based on drop location
  $newElement.css({
    position: "absolute",
    top: event.pageY - ($newElement.height() / 2),
    left: event.pageX - ($newElement.width() / 2)
  });
  
  // Add the element to the drop area
  $(this).append($newElement);
  
  // 🎉 Here's where you enable resizing!
  $newElement.resizable({
    // Optional: Add constraints like minimum size
    minWidth: 80,
    minHeight: 80,
    // Trigger save when resizing stops (for your second requirement)
    stop: function() {
      saveElementState($(this));
    }
  });
  
  // Re-enable dragging for the dropped element (if needed)
  $newElement.draggable({
    stop: function() {
      saveElementState($(this));
    }
  });
});

You need to call .resizable() after the element is in the DOM—jQuery can't bind the resizing logic to an element that doesn't exist yet!

We'll use localStorage (browser-side storage) to keep track of element states. Here's a step-by-step implementation:

Step 1: Assign Unique IDs to Elements #

Every element needs a unique identifier so we can match saved states to the right element. Add this when creating your dropped element:

var uniqueId = "element-" + Date.now(); // Generate a unique ID
$newElement.attr("id", uniqueId);

Step 2: Write a Save Function #

Create a helper function to store an element's position and size in localStorage:

function saveElementState($element) {
  var elementId = $element.attr("id");
  var elementState = {
    top: $element.css("top"),
    left: $element.css("left"),
    width: $element.css("width"),
    height: $element.css("height"),
    html: $element.html() // Optional: Save element content to recreate it on page load
  };
  
  // Store all element states in a single object
  var allStates = JSON.parse(localStorage.getItem("elementStates")) || {};
  allStates[elementId] = elementState;
  localStorage.setItem("elementStates", JSON.stringify(allStates));
}

We already hooked this function to the stop events of draggable and resizable in the first section—so every time you move or resize an element, its state gets saved.

Step 3: Restore States on Page Load #

Add this code to your $(document).ready() block to bring back saved elements and their states when the page loads:

$(document).ready(function() {
  var savedStates = JSON.parse(localStorage.getItem("elementStates")) || {};
  
  // Loop through saved states and restore each element
  $.each(savedStates, function(elementId, state) {
    var $element = $("#" + elementId);
    
    // If the element doesn't exist (page refresh), recreate it
    if (!$element.length) {
      $element = $("<div>")
        .attr("id", elementId)
        .html(state.html)
        .css({ position: "absolute" });
      $("#your-drop-area-id").append($element);
    }
    
    // Restore position and size
    $element.css({
      top: state.top,
      left: state.left,
      width: state.width,
      height: state.height
    });
    
    // Re-enable resizing and dragging
    $element.resizable({
      minWidth: 80,
      minHeight: 80,
      stop: function() { saveElementState($(this)); }
    }).draggable({
      stop: function() { saveElementState($(this)); }
    });
  });
});

Quick Tip #

To clear all saved states (for testing), run this in your browser's console:

localStorage.removeItem("elementStates");

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