Question

我正在尝试制作表单构建工具。一切都很好。我能够拖动我的第一个图标并将其放在主表单主体上，就好了。当我这样做时，它附加了一个新的类面板div。我也让面板可以放置，但是当我尝试放下它时，没有任何反应。如果我硬编码div在它工作正常，但是当我附加div它没有。我在解决这个问题上遇到了很多麻烦。

这是我的代码：

<html>
<head>

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>

<style type="text/css">
    #toolbox
    {
        width: 100%;
        height: 200px;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #666666;
        z-index: 2;
    }
    .icon
    {
        padding-top: 20px;
        padding-left: 20px;
        text-align: center;
        display: table-cell;
    }
    #formbuilder
    {
        width: 100%;
        position: absolute;
        top: 200px;
        left: 0px;
        bottom: 0px;
        padding-top: 5%;
        background-color: orange;
        opacity: 0.4;
        overflow: visible;
    }
    .panel
    {
        margin: 0 auto;
        margin-bottom: 20px;
        height: 150px;
        width: 150px;
        background-color: blue;
        opacity: 0.4;
    }
</style>

</head>

<body>

    <script type="text/javascript">
        function formDropHandler(event, ui)
        {
            if(ui.draggable.hasClass("pan"))
            {
                var form = $("#formbuilder");
                form.append('<div class="panel ui-droppable"></div>');

                $(".panel").droppable({
                    drop: panelDropHandler
                });
            }
        }

        function panelDropHandler(event, ui)
        {
            if(ui.draggable.hasClass("tab")) alert("TRUE");
        }

        $(document).ready(function() {
            var icons = $('.icon');

            $('.icon').draggable({
                cursor: 'move',
                helper: 'clone',
                revert: true
            });

            $("#formbuilder").droppable({
                drop: formDropHandler
            });

            $(".panel").live('mouseover',function(){
                $(".panel").droppable({
                    drop: panelDropHandler
                });
            });
        });
    </script>

    <div id="toolbox">
        <div class="icon pan">Panel<br /><img src="panel.png" alt="PANEL.PNG" /></div>
        <div class="icon tab">Table<br /><img src="table.png" alt="TABLE.PNG" /></div>
    </div>

    <div id="formbuilder">
        <div class="panel"></div>
        <div class="panel"></div>
    </div>

</body>

</html>

Answer 1

只有当您调用.droppable（）时存在的那些元素才会成为“dropables”。既然你已经运行了一次，那么在doc准备就绪之后，再也没有了，那么事后添加到页面中的任何元素都只是普通的元素。

您需要初始化每个新添加内容。您可以通过转换附加语句来快速完成此操作。

var form = $("#formbuilder");
$('<div class="panel ui-droppable"></div>')
    .appendTo(form)
    .droppable({drop:panelDropHandler});

Answer 2

试试这个。这两滴现在都在运作。面板将放在表单构建器上，表格会在面板上掉落（即使是新创建的面板）。请记住，formbuilder只是工具栏部分下面的彩色区域。所以你越往下走，除非你向上滚动，否则你将无法放弃任何东西。但这只是一个简单的CSS问题，将position:absolute更改为position:relative，它应随着面板一起增长。

function formDropHandler(event, ui) {
    if (ui.draggable.hasClass("pan")) {
        var form = $("#formbuilder");
        form.append('<div class="panel ui-droppable"></div>');
    } else if (ui.draggable.hasClass("tab")){
       alert("TRUE");
    }
}

$(document).ready(function() {
    var icons = $('.icon');

    $('.icon').draggable({
        cursor: 'move',
        helper: 'clone',
        revert: true
    });

    $("#formbuilder").live('mouseover', function() {
        $("#formbuilder").droppable({
            drop: formDropHandler
        });
    });
    $(".panel").live('mouseover', function() {
        $(".panel").droppable({
            drop: formDropHandler
        });
    });
});

jQuery UI droppable Not Working

2 个答案: