将元素拖放到iframe无法正常工作

Question

我在iframe外面有元素，我想将它们拖放到iframe中创建的div中。问题是：我可以拖动元素find，但我不能将它们放入iframe中的div。

这是JavaScript：

$("#btn-12").click(function(){
        var x = prompt("Please enter container name", "");
        if(x != ''){
            $.ajax({
                //type: "POST",
                //url: '<?php echo base_url()."editor/saveC";?>',
                //data: {container: x, page: <?php echo $this->uri->segment(3); ?>},
                //gunakan param page utk save page_id dari tombol bootsrap karena page_id didapat dari uri segment 3 default menu,
                //jika dari select drop down page, maka gunakan data page_id dari select drop down page 
                cache: false,
                success: function(msg){             
                    $("#iframe_editor").contents().find("#visual").append(
                        $('<div/>',{
                        'id'    : x,
                        'class'   : 'col-md-12 col-xs-12 box-12 drop'
                    }).append($(".editor")).append(
                        $("<button id=\"btn-close\" style=\"display:none;\">Close</button>"))
                    );

                    var $c = $('#iframe_editor').contents();
                    $c.delegate('#'+x, 'mouseenter', function() {
                        $(this).find(":button").show();
                        $(this).find(":button").click(function(e){
                            e.preventDefault();
                            $c.find('#'+x).remove();
                        });
                    }).on('mouseleave', '#'+x, function () {
                        $(this).find(":button").hide();
                    });                                         


                    $("#iframe_editor").droppable({
                        accept: ".draggable",
                        create: function( event, ui ){
                            alert("test");
                            drop('#'+x);
                        }
                    });

                    function drop(val){
                        var val = val;
                        alert(val); 
                        $("#iframe_editor").contents().find(val).droppable({
                            accept: ".draggable",
                            iframeFix: true,
                            drop: function (event, ui) {
                                alert("ll "+val);
                            }
                        });
                    }

这是HTML：

  <div class="main-content">
    <div class="row"> 
        <div class="col-md-12 btn-container">
            <button type="button" id="btn-12" class="btn btn-info btn-sm">+12</button>
        </div> 

        <div class="btn-page-list">   
            <div class="col-md-4 page-list">
                <?php 
                    echo "<select name = \"page_name\" id = \"page_name\" onchange=\"pickPage(this.value)\">";
                         echo "<option value = \"\">Select Page Name</option>";
                        foreach($all_pages->result() as $row){
                            echo "<option value = \"$row->t_page_ID\">".$row->name."</option>";
                        }
                    echo "</select>";
                ?>
            </div> 
            <div class="col-md-4 page-preview">
                <!-- ## -->
            </div>
            <div class="col-md-4 page-save">
                <button type="button" id="save" class="btn btn-info btn-sm">Preview Page</button> 
                <button type="button" id="save" class="btn btn-info btn-sm">Save Page</button> 
          </div>                               
        </div>

        <!--<div class="col-md-12"> 
            <iframe id="iframe_components" width="100%" height="190px" 
            src="<?php //echo base_url().'editor/components_list';?>" frameborder="0" scrolling="auto">
            </iframe> 
        </div>-->

        <div class="col-md-12"> 
            <iframe id="iframe_editor" width="100%" height="500px" 
            src="<?php echo base_url().'editor/iframe_editor';?>" frameborder="1">
            </iframe> 
        </div>
        <!-- /col-md-12 -->
    </div>
    <!-- /row -->enter code here

这是iframe：

  <body>
    <button type="button" id="btn-12" class="btn btn-info btn-sm">+12</button>
    <div id="tes" class="draggable oTextInput">
        <p>draggable-1</p>
    </div>
    <div class="jumbotron"><div id="visual" class="editor"></div></div> 
  </body>

拜托，任何人都可以帮助我。谢谢。