Drag and drop using jquery and php
I can easily drag and drop images in the first div. But the second inner answer, when I throw images, doesn't work. Could you help me find this problem?
Loading the grid is the response code. Drop image to drag script.
<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 -->
+3
source to share
1 answer
The identifier is unique.
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
});
You select items using IDs, where ID is by definition unique to your document. Therefore jQuery will only apply this function to the first element it finds. Changing the identifier for the class will most likely solve your problem.
$(".drop-area").on('drop', function (e){
//do stuff only with all elements .drop-area
});
0
source to share