使用jQuery和PHP实现拖放功能

Question

我可以轻松地将图像拖放到第一个div中。但是在响应中的第二个div中，当我拖放图像时，它不起作用。您能否帮助我找出这个问题？

Load grid是响应代码。 Drop image是用于拖放脚本。

<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 -->

- Sarath TS

Answer 1

一个 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
});

- oshell