Question

我正在创建一个动态表单，用户可以在其中创建自己的表单。他可以添加他想要的必要字段。我正在使用jquery spaceshift插件。我是如何创建的，左侧可用的表格控件很少，可以拖动。右侧有div可以放置。用户必须拖动一个字段并放入div内部。删除后，modal将会打开。在那里，他必须输入必要的值，然后单击保存按钮。这就是我尝试的方式：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Clone Demo</title>


  <!-- CSS -->
  <style>
    #clone_div{
        float: left;
        width: 251px;
    }

    #droparea_1, #droparea_2{
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 20px;
        width: 670px;
    }

    .container_div{
      margin-left: 280px;
      border: 1px solid #CCC;
      position: relative;
    }

    .container {
      border: 1px dashed #CCC;
      height: 200px;
      position: relative;
    }

    .container > div {
      background: #fff;
      position: absolute;
      width: 100px;
      overflow: hidden;
      text-overflow:ellipsis;
      border: 1px solid #777;
      text-align: center;
      height: 50px;
      line-height: 50px;
    }

    .droparea > div{
        width: 300px;
        margin-left: 0;
        border: none;
    }

    .container > .ss-placeholder-child {
      background: transparent;
      border: 1px dashed blue;
    }
  </style>

  <!-- Javascript -->
  <script>
    $(document).ready(function() {
      $(".clones").shapeshift({
          dragClone: true,
          enableCrossDrop: false
      });
      $(".droparea").shapeshift({
        colWidth: 300
      });
      $( ".container_div" ).sortable();
      $( ".container_div" ).disableSelection();
      $( "#droppable_div" ).droppable({
        drop: function( event, ui ) {
            var draggableId = ui.draggable.attr("id");
            $("#"+draggableId+"_Modal").modal();
        }
      });
    });
  </script>
</head>
<body>
  <div id="clone_div" class="container clones">
    <div id="SingleLine"><?php echo $this->Html->image('newrectangle.png'); ?> Single Line</div>
    <div id="MultiLine"><?php echo $this->Html->image('multiline.png'); ?> Multi Line</div>
    <div id="PickList"><?php echo $this->Html->image('picklist.png'); ?> Pick List</div>
    <div id="MultiSelect"><?php echo $this->Html->image('multiselect.png'); ?> Multi Select</div>
  </div>

  <div id="droppable_div" class="container_div">
    <div id="droparea_1" class="container droparea">
    </div>
    <div id="droparea_2" class="container droparea">
    </div>
  </div>    

</body>
</html>

我还没有显示模态的代码，因为它会变得更大。

我在获得我想要的东西时遇到了一些问题：

如果您在第一张图片中看到，当某个字段被放入div时，该字段会突出显示。将哪些字段放入div中，这些字段会突出显示。我怎样才能摆脱它，即它们显示没有突出显示。
当我放下一块田地时，它会落在div的中心。但是，我不希望这样，我希望它可以落在右侧或左侧。我怎样才能做到这一点？
每当添加时，我想动态地为这些div添加删除和编辑选项。这可以吗？如果是这样的话？我之所以这样问是因为，我不明白这些新div在我放到那里时是如何产生的。

有人可以帮我这些吗？

使用jquery.shapeshift-master创建动态表单

0 个答案: