Javascript Formbuilder拖放_Javascript_Jquery_Html

Javascript Formbuilder拖放

javascript jquery html

Javascript Formbuilder拖放,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试使用jQuery拖放功能进行自己的实验，我想知道是否可以得到一些帮助：我需要下拉控件和文本显示在拖放控件区域中，并允许它们进行排序。我已尝试将控件固定到安全壳div 但是，它仍然允许将其从主容器的侧面拉出div： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>draggable demo

我正在尝试使用jQuery拖放功能进行自己的实验，我想知道是否可以得到一些帮助：我需要下拉控件和文本显示在拖放控件区域中，并允许它们进行排序。我已尝试将控件固定到安全壳

div

但是，它仍然允许将其从主容器的侧面拉出

div

：

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>draggable demo</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
      <style>
      #draggable {
        width: 100px;
        height: 100px;
        background: #ccc;
      }
      </style>
      <style type="text/css">
    .movecontrol {cursor:move}

    </style>
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
    </head>
    <body>

    <div id="draggable">Drag me</div>

    <style>
      .draggable {   padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; border:none; }
      .ui-widget-header p, .ui-widget-content p { margin: 0; }
      #snaptarget { height: 140px; }
       #containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; }

      </style>
      <script>
      $(function() {
        $( "#draggable" ).draggable({ snap: true });
        $( "#draggable2" ).draggable({ snap: ".ui-widget-header" });
        $( "#draggable3" ).draggable({ snap: ".ui-widget-header", snapMode: "outer" });
        $( "#draggable4" ).draggable({ grid: [ 20, 20 ] ,containment: "parent"});
        $( "#draggable5" ).draggable({ grid: [ 80, 80 ] });
      });
      </script>

       <div id="containment-wrapper">

       Drop all your form controls here

     </div>




     </div>
     <div id="containment-wrapper">

    <div id="draggable" class="draggable ui-widget-content">
      <SELECT id="name" >
      <option>Test</option>
      </select>
    </div>

    <div id="draggable2" class="draggable ui-widget-content">
       <input type="text" name="lname" ><br>
    </div>

    <div id="draggable3" class="draggable ui-widget-content">
     <input type="text" name="lname" ><br>  <p>I only snap to the outer edges of the big box</p>
    </div>
    <div class="draggable ui-widget-content">
    <p id="draggable5" class="ui-widget-header">I'm contained within my parent</p>
      </div>




     </div>
    </body>
    </html>


可拖动的演示
#拖拉的{
宽度：100px；
高度：100px；
背景：#ccc；
}
.movecontrol{cursor:move}
拖我
.draggable{填充：5px；浮点：左；边距：0 10px 10px 0；字体大小：.9em；边框：无；}
.ui小部件标题p、.ui小部件内容p{margin:0；}
#snaptarget{高度：140px；}
#安全壳包装{宽度：95%；高度：150px；边框：2px实心#ccc；衬垫：10px；}
$（函数（）{
$（“#draggable”）.draggable（{snap:true}）；
$（“#draggable2”）.draggable（{snap:.ui小部件头“}）；
$（“#draggable3”）.draggable（{snap:.ui小部件头”，snapMode:.outer}）；
$（“#draggable4”）.draggable（{grid:[20,20]，包含：“parent”}）；
$（“#draggable5”）.draggable（{grid:[80,80]}）；
});
请将所有表单控件放在此处
试验



我只捕捉到大盒子的外缘
我被包含在我的父母中

是的，但它没有按预期工作

第二次尝试这允许我进行排序和删除，但如何使它们成为我希望它们成为的实际元素，例如，在文本框中

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Draggable + Sortable</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
  li { margin: 5px; padding: 5px; width: 150px; }
  </style>
  <script>
  $(function() {
    $( "#sortable" ).sortable({
      revert: true
    });
    $( "#draggable" ).draggable({
      connectToSortable: "#sortable",
      helper: "clone",
      revert: "invalid"
    });
    $( "ul, li" ).disableSelection();

     $( "#draggable2" ).draggable({
      connectToSortable: "#sortable",
      helper: "clone",
      revert: "invalid"
    });
    $( "ul, li" ).disableSelection();
  });
  </script>
</head>
<body>

 <div style="float:left;">
<ul>
  <li id="draggable" class="ui-state-highlight">Text Box</li>
</ul>
<ul> 
 <li id="draggable2" class="ui-state-highlight">Radio Button</li>
</ul>
</div>
 <div style="float:left;">
<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>
</div>


</body>
</html>


jQuery UI可拖动+可排序
ul{列表样式类型：无；边距：0；填充：0；边距底部：10px；}
li{边距：5px；填充：5px；宽度：150px；}
$（函数（）{
$（“#可排序”）。可排序({
回复：真
});
$（“#可拖动”）。可拖动({
connectToSortable:“#可排序”，
助手：“克隆”，
回复：“无效”
});
$（“ul，li”）.disableSelection（）；
$（“#可拖动2”）。可拖动({
connectToSortable:“#可排序”，
助手：“克隆”，
回复：“无效”
});
$（“ul，li”）.disableSelection（）；
});

文本框


单选按钮


第1项
第2项
第3项
第4项
第5项