Javascript 拖放不处理ajax加载图像

Javascript 拖放不处理ajax加载图像,javascript,jquery,html,Javascript,Jquery,Html,我正在进行图像的拖放。第一次加载页面时,拖动图像并将其放到另一个div中工作正常。 我可以调整拖放图像的大小并将其拖动到同一分区中。 在sibebar中,我有类别列表。当我单击某个类别时,与该类别相关的所有图像都将显示在可拖动分区中。 但是当我尝试拖动和调整大小时,它对使用ajax加载的图像不起作用 对于使用ajax加载的图像,是否需要再次使用jquery Html代码 <section class="outfit-maker sized hide-mobile"> <di

我正在进行图像的拖放。第一次加载页面时,拖动图像并将其放到另一个div中工作正常。
我可以调整拖放图像的大小并将其拖动到同一分区中。
在sibebar中,我有类别列表。当我单击某个类别时,与该类别相关的所有图像都将显示在可拖动分区中。
但是当我尝试拖动和调整大小时,它对使用ajax加载的图像不起作用

对于使用ajax加载的图像,是否需要再次使用jquery

Html代码

<section class="outfit-maker sized hide-mobile">
  <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">

    <div class="col canv droppable" id="droppable">

      <!-- this is where the content can be dropped -->

    </div>
  </div>

  <div class="col" id="col1" style="overflow-y: scroll;height:722px;">
    <div class="loading" style="display: none;"><span class="icon-spinner-gif"></span></div>
    <div id="drag-list" class="drag-list">
      <div>
        <ul class="get-image">

          <!-- each image added here will have the "drag" class -->
          <?php 
                          $args = array( 'post_type'=>'products', 'posts_per_page' =>-1,'order' => 'ASC');
                          $query=new WP_Query($args);
                          while ($query->have_posts() ) : $query->the_post();
                          $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );  

                        ?>

            <li><span data-item-id="<?php echo $post->ID; ?>" id="drag-<?php echo $post->ID; ?>" class="drag resize-img img-id<?php echo $post->ID; ?>" data-label="<?php echo the_field('shop_title') ?>" data-shop="<?php echo the_field('shop') ?>" data-unit="<?php echo the_field('unit_no') ?>">
                                     <img data-src-full="<?php echo $url; ?>"  src="<?php echo $url; ?>" class="drag-image component" data-img-id="<?php echo $post->ID; ?>">

                                </span>
            </li>

            <?php endwhile; ?>

        </ul>

      </div>
    </div>
  </div>

</section>
这段代码用于加载类别图像

  /* Show Style Borad Category Product on Click */

      jQuery(".my-sub-cat").click(function() {

        var catId = jQuery(this).attr('id'); 
        jQuery('.loading').css('display', 'block');
        jQuery('#drag-list').addClass('js-loading-overlay');
        jQuery.ajax({
        type: 'POST',   
        url: MyUrl.ajaxurl, //Including ajax file
        data: {"action": "get_cat_products", "catId":catId}, 
        success: function(data){ //Show returned data using the function.
            jQuery('.loading').css('display', 'none');  
            jQuery('#drag-list').removeClass('js-loading-overlay');
            elementDrag(data);
             makemedragable();
            //alert(data);
            jQuery(".get-image").html(data);
        }
    });
 });

这个错误似乎来自于

 jQuery(".drag").draggable({
    helper: 'clone',
    cursor: 'move',
    tolerance: 'fit',
    revert: true
  });
改为这样做:

jQuery(".get-image .drag").draggable({
    helper: 'clone',
    cursor: 'move',
    tolerance: 'fit',
    revert: true,
    /* stop: function (event, ui) { ... } */

});
jQuery(".droppable .drag").draggable({ });
在准备好的文档中,只写以下内容:

jQuery(document).ready(function() {
  makemedragable();
});
这是整个custom.js文件的副本,已修改:

似乎错误来自

 jQuery(".drag").draggable({
    helper: 'clone',
    cursor: 'move',
    tolerance: 'fit',
    revert: true
  });
改为这样做:

jQuery(".get-image .drag").draggable({
    helper: 'clone',
    cursor: 'move',
    tolerance: 'fit',
    revert: true,
    /* stop: function (event, ui) { ... } */

});
jQuery(".droppable .drag").draggable({ });
在准备好的文档中,只写以下内容:

jQuery(document).ready(function() {
  makemedragable();
});
这是整个custom.js文件的副本,已修改:

我已更改了上面的jquery。请看一看。现在我可以使用ajax拖放图像了。但它正在制造问题。当我第一次进入页面并拖动图像时,它工作正常。然后我点击分类,它加载了更多的图片,拖放效果很好。但是当我再次尝试拖动第一个图像时,我第一次拖动了它,然后它就不工作了。拖动只对最后一个图像有效。我还添加了html。如果你需要的话,我也可以为你提供我正在检查的链接。加载图像后,拖动任何图像并放入空白分区。然后单击任何类别,它将加载图像。然后从中拖动任何图像。拖动后,拖动两个图像。拖动分层图像可以正常工作,但在页面加载后首次拖动的图像将无法拖动。它不工作。显示错误“无法在初始化之前调用DragTable上的方法;尝试调用方法‘enable’”。我已更改了上面的jquery。请看一看。现在我可以使用ajax拖放图像了。但它正在制造问题。当我第一次进入页面并拖动图像时,它工作正常。然后我点击分类,它加载了更多的图片,拖放效果很好。但是当我再次尝试拖动第一个图像时,我第一次拖动了它,然后它就不工作了。拖动只对最后一个图像有效。我还添加了html。如果你需要的话,我也可以为你提供我正在检查的链接。加载图像后,拖动任何图像并放入空白分区。然后单击任何类别,它将加载图像。然后从中拖动任何图像。拖动后,拖动两个图像。拖动分层图像可以正常工作,但在页面加载后首次拖动的图像将无法拖动。它不工作。显示错误“无法在初始化之前调用draggable上的方法;尝试调用方法‘enable’”