0

我正在尝试动态生成带有标题的 Div（与 onClick 方法一起使用），但我想通过拖放来完成这项工作。当我删除列表项时，它应该生成带有首选标题大小的标题的 Div。）我已经将所有这些都与 onClick 事件一起使用。

所以我的实际问题是如何使它与拖放一起工作。它现在所做的是将我的列表项移动到生成的 Div 应该出现的表单中。

代码： 

$(document).ready(function () {
    $('li').draggable({ containment: 'document', revert: true});

    $('#form').droppable({ hoverClass: 'border', accept: '.drags',
    drop: function GenerateHeading () { /* Something wrong here */
    var heading = prompt("Pick a heading size between h1 and h6");
    if (heading != "h1" && heading != "h2" && heading != "h3" && heading != "h4" && heading != "h5" && heading != "h6") {
        alert("Please insert a valid heading size!");
    } else {
    if(counter>3){
            alert("Only 3 Headings allowed");
            return false;
    }   

    var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'HeadingDiv' + counter).attr("class", 'HeadingDiv');

    newTextBoxDiv.after().html('<' + heading + '>Heading #'+ counter + ' : </' + heading + '>');

    newTextBoxDiv.appendTo("#form");


    counter++;
     }
     }
    });

});
4

2 回答 2

1

很难理解这里发生了什么，但我尽我所能清理它：

$(document).ready(function ()
{
    $('li').draggable({ containment: 'document', revert: true});

    $('#form').droppable(
    {
        hoverClass: 'border',
        accept: '.drags',
        drop: function()
        {
            var aHeaderOptions = ["h1", "h2", "h3", "h4", "h5", "h6"];
            var heading = prompt("Pick a heading size between h1 and h6");

            if (aHeaderOptions.indexOf(heading) != -1)
            {
                alert("Please insert a valid heading size!");
            }
            else
            {
                if($('#form .heading').length > 3)
                {
                    alert("Only 3 Headings allowed");
                    return false;
                }

                var newTextBoxDiv = $("<div />").attr(
                {
                    "id": 'HeadingDiv'+counter,
                    "class": 'HeadingDiv'
                });

                var heading = jQuery('<'+heading+'>')
                    .attr({ "class": "heading" })
                    .text('Heading #'+ counter + ':');

                jQuery("#form").prepend(heading);
            }
        }
    });
});

如果您可以提供 HTML 组件，我很乐意进一步了解您正在尝试做的事情。

于 2013-09-07T16:31:35.063 回答
0

我是个新手 :p 因为我已经创建了这个函数，所以我只需要在 drop 时调用它！非常感谢您甚至试图清除我的混乱：p！像这样：

 $(function () {
                $('li').draggable({ containment: 'document', revert: true});

                $('#form').droppable({ hoverClass: 'border', accept: '.drags',
                drop: GenerateHeading()
                });
            });</script>
于 2013-09-11T14:02:42.217 回答