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