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

0

私はまったくの初心者です:p すでに関数を作成していたので、ドロップ時に呼び出す必要がありました! 私の混乱を解消しようとしてくれてありがとう :p ! このような：

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

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