我正在研究图像的拖放。第一次加载页面时，拖动图像并将其放入另一个 div 中工作正常。
我可以调整放置的图像的大小并将它们拖动到同一个 div 中。
在 sibebar 中，我有类别列表。当我单击某个类别时，与该类别相关的所有图像都会出现在可拖动的 div 中。
但是当我尝试拖动和调整大小时，它不适用于使用 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>
这是我的拖放代码
function elementDrag(el){
el.draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit',
revert: true,
stop: function (event, ui) {
}
});
}
jQuery(document).ready(function () {
//elementDrag(data)
//makemedragable();
jQuery.ajax({
type: 'POST',
url: MyUrl.ajaxurl, //Including ajax file
data: {"action": "get_cat_products","status":"0"},
success: function(data){ //Show returned data using the function.
elementDrag(data);
jQuery(".get-image").html(data);
makemedragable();
}
});
});
function makemedragable() {
var x = null;
jQuery(".droppable").droppable({
accept: '.drag',
activeClass: "drop-area",
drop: function(e, ui) {
if (jQuery(ui.draggable)[0].id != "") {
x = ui.helper.clone();
ui.helper.remove();
jQuery(".droppable .resize-img").css({
"display": "inline-table",
"height": "131px",
"width": "118px"
});
/* To show Controls first time on Dragged Image*/
var droppedItemId = ui.draggable.attr("data-item-id");
var dataunit = ui.draggable.attr("data-unit");
var datalabel = ui.draggable.attr("data-label");
var datashop = ui.draggable.attr("data-shop");
jQuery(".controls ").attr("controls-item-id", droppedItemId);
jQuery(".controls li:nth-child(4)").text("ITEM: " + datalabel);
jQuery(".controls li:nth-child(5)").text("SHOP: " + datashop);
jQuery(".controls li:nth-child(6)").text("UNIT NO: " + dataunit);
jQuery(".droppable").find(".ui-resizable-handle").hide(); // To show Controls
jQuery(".controls").show();
dragEl = jQuery(this);
stopPosition = dragEl.position();
var height = x.height(); // To show the controls with exact position
var width = x.width();
var mytop = stopPosition.top + height;
var myleft = stopPosition.left + width / 2;
jQuery(".controls").css({
"top": mytop,
"left": myleft,
"display": "block"
});
x.draggable({
helper: 'original',
cursor: 'move',
containment: '.droppable',
tolerance: 'fit',
drop: function(event, ui) {
jQuery(ui.draggable).remove();
},
drag: function() {
},
stop: function() {
dragEl = jQuery(this);
stopPosition = dragEl.position();
stopOffset = dragEl.offset();
document_id = dragEl.data("document-id");
signer_id = dragEl.data("signer-id");
var height = x.height();
var width = x.width();
var mytop = stopPosition.top + height;
var myleft = stopPosition.left + width / 2;
jQuery(".controls").css({
"top": mytop,
"left": myleft,
"display": "block"
});
dataItem = jQuery(this).attr('data-item-id');
jQuery(".droppable").find(".ui-resizable-handle").hide();
jQuery(".controls").hide();
jQuery(this).closest(".drag").find(".ui-resizable-handle").show();
var dataunit = jQuery(this).attr("data-unit");
var datalabel = jQuery(this).attr("data-label");
var datashop = jQuery(this).attr("data-shop");
jQuery(".controls li:nth-child(4)").text("ITEM: " + datalabel);
jQuery(".controls li:nth-child(5)").text("SHOP: " + datashop);
jQuery(".controls li:nth-child(6)").text("UNIT NO:" + dataunit);
jQuery(".controls").show();
jQuery(".controls ").attr("controls-item-id", dataItem);
}
});
x.resizable({
maxHeight: jQuery('.droppable').height(),
maxWidth: jQuery('.droppable').width(),
aspectRatio: true,
helper: "ui-resizable-helper",
handles: "nw, ne, sw,se"
});
x.addClass('remove');
x.appendTo('.droppable');
jQuery(".droppable .drag").on('click', function(e) {
var dataItem = jQuery(this).attr("data-item-id");
jQuery(".droppable").find(".ui-resizable-handle").hide();
jQuery(".controls").hide();
jQuery(this).closest(".drag").find(".ui-resizable-handle").show();
var dataunit = jQuery(this).attr("data-unit");
var datalabel = jQuery(this).attr("data-label");
var datashop = jQuery(this).attr("data-shop");
jQuery(".controls li:nth-child(4)").text("ITEM: " + datalabel);
jQuery(".controls li:nth-child(5)").text("SHOP: " + datashop);
jQuery(".controls li:nth-child(6)").text("UNIT NO: " + dataunit);
jQuery(".controls").show();
jQuery(".controls ").attr("controls-item-id", dataItem);
});
}
}
});
/* To remove the Element on remove click */
jQuery(".droppable .controls li.canvas-remove-item").on('click', function(e) {
var removeId = jQuery(".controls").attr("controls-item-id");
jQuery('.droppable .resize-img').filter('[data-item-id = ' + removeId + ']').remove();
jQuery(".droppable").find(".ui-resizable-handle").hide();
jQuery(".controls").hide();
});
//var a =2;
jQuery(".droppable .controls li.front-item").on('click', function(e) {
var frontId = jQuery(".controls").attr("controls-item-id"); //alert(frontId);
jQuery('.droppable .resize-img').removeClass('top').addClass('bottom');
jQuery('.droppable .resize-img').filter('[data-item-id = ' + frontId + ']').addClass('top').removeClass('bottom');
});
jQuery(".droppable .controls li.back-item").on('click', function(e) {
var backId = jQuery(".controls").attr("controls-item-id");
jQuery('.droppable .resize-img').removeClass('bottom').addClass('top');
jQuery('.droppable .resize-img').filter('[data-item-id = ' + backId + ']').addClass('bottom').removeClass('top');
});
jQuery(".droppable").click(function(e) {
// matches all children of droppable, change selector as needed
if (jQuery(e.target).closest(".drag").length > 0) {
jQuery(e.target).closest(".drag").find(".ui-resizable-handle").show();
jQuery(".controls").show();
} else {
jQuery(".droppable").find(".ui-resizable-handle").hide();
jQuery(".controls").hide();
}
});
}
此代码用于加载类别图像。
/* 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 文件的副本(已修改): https://jsfiddle.net/virginieLGB/fxvpgfvL/1/
关于javascript - 拖放不适用于 ajax 加载图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36197491/