Question

我正在尝试使用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>

我做了JSFiddle，但它没有按预期工作。

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

<!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>

Formbuilder拖放

0 个答案: