gpt4 book ai didi

javascript - 使用 jquery 和 php 拖放

转载 作者:搜寻专家 更新时间:2023-10-31 21:57:51 24 4
gpt4 key购买 nike

我可以轻松地将图像拖放到第一个 div 中。但是当我删除图像时,响应中的第二个 div 不起作用。你能帮我找出这个问题吗?

加载网格是响应代码。拖放图像用于拖放脚本。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="drop-area"><h3 class="drop-text">Drag and Drop Images Here</h3></div>

<!-- Load Grid Begin -->
$(document).ready(function(){
var deleteID;
$.ajax({
type: "POST",
url: "insert.php",
dataType: 'json',
data: {gridload: 'loadingposition'},
success: function (response) {
for (var i in response)
{
var obj = jQuery.parseJSON( response[i].position );
var id = response[i].id;
deleteID = response[i].id;
var grid = $('.grid-stack').data('gridstack');
grid.add_widget($('<div><div class="grid-stack-item-content" id="divAllTextBox_'+id+'" data-custom-id="'+id+'"><form id="addForm_'+id+'" method="post"><div class="form-group"><label for="column">Image</label><div id="drop-area"><h3 class="drop-text">Drag and Drop Images Here</h3></div></div><button class="btn btn-default" id='+id+' onclick="saveData('+response[i].id+'); return false;">Submit</button></form></div><div/>'),obj.x, obj.y, obj.width, obj.height, true);
}
}
});
});
<!-- Load Grid End -->

<!-- Drop Image Begin -->
$(document).ready(function() {
$("#drop-area").on('dragenter', function (e){
e.preventDefault();
$(this).css('background', '#BBD5B8');
});

$("#drop-area").on('dragover', function (e){
e.preventDefault();
});

$("#drop-area").on('drop', function (e){
$(this).css('background', '#D8F9D3');
e.preventDefault();
var image = e.originalEvent.dataTransfer.files;
createFormData(image);
});
});

function createFormData(image) {
var formImage = new FormData();
formImage.append('userImage', image[0]);
uploadFormData(formImage);
}

function uploadFormData(formData) {
$.ajax({
url: "upload.php",
type: "POST",
data: formData,
contentType:false,
cache: false,
processData: false,
success: function(data){
$('#drop-area').append(data);
}
});
}
<!-- Drop image End -->

最佳答案

ID 是唯一的。

for (var i in response)
{
//add elements with #drop-area here
}

$("#drop-area").on('drop', function (e){
//do stuff with the first matched element #drop-area
});

您可以使用 ID 选择元素,根据定义,ID 对于您的文档是唯一的。因此 jQuery 只会将给定的功能应用于它找到的第一个元素。将 ID 更改为类很可能会解决您的问题。

$(".drop-area").on('drop', function (e){
//do stuff only with all elements .drop-area
});

关于javascript - 使用 jquery 和 php 拖放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31668685/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com