静态及动态创建img绑定jQuery UI Draggable失效问题求助

Hey there! Let's work through why your draggable bindings aren't working for both static and dynamically created elements. I'll break down the issues and show you how to fix them step by step.

First: Fixing the Static <img> Binding #

If your static #draggable element isn't responding to .draggable(), these are the most likely culprits:

1. Missing/Out-of-Order Libraries: The draggable() method is part of jQuery UI, not core jQuery. You need to load jQuery first, then jQuery UI, before your custom script. Skip either or load them in the wrong order, and the method won't exist.
2. Script Runs Before DOM is Ready: If your code executes before the <img id="draggable"> loads into the DOM, jQuery can't find the element to bind to. Always wrap initialization code in $(document).ready() (or the shorthand $(function() { ... })).
3. Duplicate IDs: Ensure only one element on the page uses id="draggable" — HTML requires IDs to be unique.

Fixed Static Element Code #

<!-- Load jQuery first -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- Then load jQuery UI -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<!-- Your custom script -->
<script>
$(function() {
  // Wait for DOM to fully load before binding
  $("#draggable").draggable();
});
</script>

<!-- Static draggable image -->
<img id="draggable" src="your-image-path.jpg" alt="Draggable image">

Second: Fixing Dynamically Created Elements #

Your dynamic setup has two critical issues:

• Duplicate IDs: You're creating multiple elements with id="draggable" — this is invalid HTML, and jQuery will only ever target the first element with that ID.
• Binding Before Elements Exist: When you call .draggable() outside the AJAX success callback, the dynamic images haven't been added to the DOM yet, so jQuery can't find them.

Fixed Dynamic Element Code #

We'll use a class (instead of an ID) for draggable images, and bind the method after elements are added to the DOM. Here are two clean approaches:

Option 1: Bind Immediately When Creating Elements

Create each user card as a jQuery object, bind draggable() to its image, then append it to the DOM:

$.ajax({
  type: "GET",
  url: "***",
  success: function(response){
    $.each(response, function(key, users){
      $.each(users, function(key, user){
        // Build the user card as a jQuery object
        const userCard = $(`
          <div class="col ui-widget-content">
            <b>id:</b>${user.id}&nbsp <b>name:</b>${user.name}
            <img class="draggable-emoji emoji" src="${user.imgSrc}">
          </div>
        `);
        // Bind draggable to the new image
        userCard.find(".draggable-emoji").draggable();
        // Add the card to the page
        $("#users").append(userCard);
      });
    });
  }
});

Option 2: Append All HTML First, Then Bind in Bulk

If you prefer building all HTML first, append it to the DOM, then bind draggable() to all new images at once:

$.ajax({
  type: "GET",
  url: "***",
  success: function(response){
    let html = "";
    $.each(response, function(key, users){
      $.each(users, function(key, user){
        html += `
          <div class="col ui-widget-content">
            <b>id:</b>${user.id}&nbsp <b>name:</b>${user.name}
            <img class="draggable-emoji emoji" src="${user.imgSrc}">
          </div>
        `;
      });
    });
    // Add all content to the DOM first
    $("#users").append(html);
    // Bind draggable to all new .draggable-emoji elements
    $(".draggable-emoji").draggable();
  }
});

Quick Recap of Key Fixes #

• Load jQuery before jQuery UI, and wrap static bindings in $(document).ready().
• Use classes instead of IDs when working with multiple draggable elements.
• Always bind draggable() after dynamic elements are added to the DOM.

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