Question

我可以轻松地在第一个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 -->

使用jquery和php拖放

0 个答案: