Question

我正在尝试编写一个拖放表单生成器，如WordPress小部件区域。好吧，以下是我的示例左侧导航栏（它是来源）

<ul id="form-fields">
   <li id="text-field">Text Field</li>
   <li id="textarea-field">Text Area</li>
   <li id="select-field"mySelect</li>
   <li id="radio-field">Radio Button</li>
   <li id="checkbox-field">Checkboxes</li>
   <li id="password-field">Password</li>
   <li id="file-field">File Upload</li>
</ul>

我的空表格（目的地）如下：

.Containt{ width: 100%; height: 800px; padding: 0.5em; float: left; margin: 10px; background-color:#ffff00;}
<div  class="Containt"></div>

我已经生成了一个JqueryUI脚本，如下所示：

$(function() {
 $('#text-field').draggable({
        revert: "valid",
        appendTo: "body",
        helper: "clone",
        cursor: "move"
    });
 $(".Containt").droppable({  
      accept: ":not(.ui-sortable-helper)",
      drop: function( event, ui ) {
        $( '<div class="col-md-8"></div>' ).html('Check the 1st new figure: <input type="text" name="textbox" id="textbox" value=""/ >').appendTo( this );
        }
    }).sortable({
        cursor: "move",
        items: "div:not(.placeholder)",
            sort: function() {
            $( this ).removeClass( "ui-state-default" );
      }
   });    
});

这些代码组合确实生成了我在html中声明的html文本字段，但问题是我只能拖放＆amp;仅生成TextField选项中的文本字段等单个元素。但不能做别人。我尝试了$('#form-fields li').draggable({，但我无法生成自动字段（如文本区域的文本区域，文本字段命令的文本字段）。它仅适用于一个来源，一个目的地。但我希望这与Wordpress小部件区域一样工作。 http://jsfiddle.net/abmmhasan/9WzeD/

Answer 1

    <style type="text/css">
 .Containt{ width: 100%; height: 800px; padding: 0.5em; float: left; margin: 10px; background-color:#ffff00;}
#form-fields li .val{display: none;}
.Containt li .val{display: inline-block}
.Containt li .txt{display: none}
.ui-draggable-dragging .val{display: none !important}
    </style>

    <script>
   $(document).ready(function()
{

$('#form-fields li').draggable({
        revert: "valid",
        appendTo: "body",
        helper: "clone",
        cursor: "move"
    });
$(".Containt").droppable({  
    accept: ":not(.ui-sortable-helper)",
    drop: function(event, ui) {   

    /* Remove Comment if want to use each element once.
         var self = $(this);
        self.find(".placeholder").remove();
    */
         var newclass = "road";
         // change class name whatever you want

        // 
        var item = ui.draggable.html(); 
        var s =item; 
        var r = /<span>(.*)<\/span>/g;
        var newtxt=s.replace(r,""); 

        $("<div></div>", {            
            "html": newtxt,
            "class": newclass
        }).appendTo(this);   
    }


    }).sortable({
        cursor: "move",
        items: "div:not(.placeholder)",
      sort: function() {
        $( this ).removeClass( "ui-state-default" );
      }
    });

});
    </script>
    <body>
    <ul id="form-fields">
        <li id="text-field"><span>Text Field</span><input type="text" name="textbox" class="val" /></li>
        <li id="textarea-field"><span>Text Area</span><textarea rows="4" cols="50" class="val"></textarea></li>
        <li id="select-field"><span>mySelect</span><select class="val"><option value="option1">option1</option></select></li>
        <li id="password-field"><span>Password</span><input type="password" name="pwd" class="val" /></li>
    </ul>

<div  class="Containt"></div>
    </body>

http://jsfiddle.net/LftNd/6/

使用JqueryUI拖放以生成WordPress小部件区域等字段

1 个答案: