Question

我正在使用jquery做事。我想将标识为draggable的元素拖到ID drop。

在删除时我想将div添加到类droppable2的div中。案例拖放元素在同一页面中工作正常。但我的要求是在index.php中拖动元素并在data.php中删除元素。在那种情况下，拖动工作正在进行，但div附加功能无效。

我有以下网页：index.php，ajaximage.php和data.php。我这里没有包含ajaximage.php和data.php页面的所有代码，只是一些PHP代码。我的工作是将excel上传到数据库并显示它。

的index.php

<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.form.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script type="text/javascript" >
    $(document).ready(function () {
        $('#photoimg').live('change', function () {
            //$("#preview").css("height","auto");
            $("#imageform2").ajaxForm({
                target: '#preview'
            }).submit();
        });
    });
    function show() {
        var main_width = $("#main_width").val();
        var main_height = $("#main_height").val();
        if (main_width == "") {
            alert("Enter Main Sheet Width");
            return false;
            $('#main_width').focus();
        }
        if (isNaN(main_width)) {
            alert("Given value is not a number");
            document.getElementById('main_width').focus();
            return false;
        }
        if (main_height == "") {
            alert("Enter Main Sheet Height");
            return false;
            $('#main_height').focus();
        }
        if (isNaN(main_height)) {
            alert("Given value is not a number");
            document.getElementById('main_height').focus();
            return false;
        }
        $("#preview").css({"border": "1px solid  #CCCCCC",
            "margin": "auto", "width": main_width + "px", "height": main_height + "px"});
        $("#main_tab").hide();
        $("#imageform").show();
        $("#pagination").show();
    }
    $(function () {
        $("#draggable").draggable();
        $("#drop").droppable({
            drop: function (event, ui) {
                alert("jjjj");
                $(".droppable2").append("<div id='draggable'>dd</div>")
            }
        });
    });
</script>
<body>
    <div >
        <div style="margin-left:431px;">
            <form method="post" id="imageform2" enctype="multipart/form-data" action='ajaximage.php' >
                <table id="main_tab" >
                    <tr>
                        <td>Main Sheet Width</td>
                        <td><input name="main_width" type="text" id="main_width"></td>
                    </tr>
                    <tr>
                        <td>Main Sheet Height</td>
                        <td><input name="main_height" type="text" id="main_height"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td> <input name="" type="button"  value="Set" onClick="show()"></td>
                    </tr>
                </table>
                <table style="margin-left:38px;display:none;" id="imageform">
                    <tr><td>Width of Cell </td><td> <input name="width" type="text">&nbsp;%</td></tr>
                    <tr><td>Height of Cell</td><td> <input name="height" type="text">&nbsp;%</td></tr>
                    <tr><td>Upload  File</td><td> <input type="file" name="photoimg" id="photoimg" /></td></tr>
                </table>
            </form>
        </div>
        <div id="draggable" >dd</div>
        <div id='preview'></div>
        <ul id="pagination" style="display:none;"></ul>  
        <div id="loading" ></div>
    </div>
</body>
</html>

ajaximage.php

<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" >
    $(document).ready(function () {
        var page = 1;
        $.ajax({
            type: "GET",
            url: 'data.php',
            data: 'page=' + page,
            success: function (msg) {
                $("#preview").html(msg);
            }
        });
    });
</script>

data.php

<div id="drop"></div>
<div class="droppable2"></div>
<div class="droppable2"></div>

任何机构都会针对这些问题提供解决方案吗？

Answer 1

当您通过ajax加载data.php时，您应该在呼叫准备就绪后定义droppable：

在ajaximage.php：

$(document).ready(function () {
        var page = 1;
        $.ajax({
            type: "GET",
            url: 'data.php',
            data: 'page=' + page,
            success: function (msg) {
                $("#preview").html(msg);
                $("#drop").droppable({
                    drop: function (event, ui) {
                        alert("jjjj");
                        $(".droppable2").append("<div id='draggable'>dd</div>")
                    }
                });
            }
        });
    });

使用jquery正确使用拖放操作

1 个答案: