创建新项目时Jquery-ui可排序跳转

【问题标题】：Jquery-ui sortable jumping around when new item is created创建新项目时Jquery-ui可排序跳转
【发布时间】：2018-02-02 11:44:54
【问题描述】：

我遇到了 jQuery UI Sortable 的问题。

如果你运行demo，点击option 1，然后点击添加（它会添加一个新选项。在每个选项的左侧，当你悬停它时，会有一个s。如果你“抓取”，您可以在其父容器内拖动选项。所有这些都可以正常工作。

但是，当您单击“添加问题”，然后尝试拖动周围的任何选项时，它们的行为确实发生了变化，它们有点跳来跳去，我不知道为什么？

$(".sortAble").sortable({
  revert: true,
  items: ".row.none"
});


$(document).ready(function() {
  console.clear();
  $(document).on("focus", "input", function() {
    $(".conselect").removeClass("conselect");
    $(this).closest(".con").addClass("conselect");
  });

  $(document).on("click", ".selector .item", function() {
    $(this).closest(".con").find(".selected").removeClass("selected");
    if ($(this).closest(".selector").hasClass("active")) {
      var i = $(this).index();

      $(this).closest(".items").css("top", -(i * 35));
      $(this).addClass("selected");
      var selectedclass = $(this).find("span").attr("class");
      $(this).closest(".con").find(".icon").removeClass("choiceicon checkboxicon").addClass(selectedclass);
    } else {
      $(this).addClass("selected");
    }
    $(this).closest(".selector").toggleClass("active");
  });

  $(document).on("click", ".addq", function() {
    var newrow = $(this).closest(".row").prev(".sortAble").find(".row:last").clone();
    var i = $(this).closest(".row").index();
    newrow.find("input").val("").attr("placeholder", "Option " + i);
    newrow.appendTo($(this).closest(".row").prev(".sortAble"));
    // $(this).closest(".Question").find(".row:not(:first) input").each(function(i,x){
    //     $(this).attr("placeholder", "Option "+ (i + 1))
    // })
    checkRow($(this).closest(".Question"));
  });

  var newqrow = '<div class="Question con"> <div class="row"> <div class="input-field col s8"> <input id="" type="text" class="" placeholder="Question Title"> </div> <div class="settings input-field col s4"> <div class="selector"> <div class="items"> <div class="item selected"> <span class="radioicon"></span>Choice </div> <div class="item"> <span class="checkboxicon"></span>Checkbox </div> <div class="item"> Dropdown </div> </div> </div> </div> </div> <div class="sortAble"> <div class="row none"> <div class="col s12 qrow"> <div class="sort col s1"> <span class="fa fa-sort">s</span> </div> <div class="qoption col s11"> <div class="icon radioicon"> </div> <input type="text" class="" placeholder="Option 1"> <div class="deleteq"> <span class="fa fa-times"></span> </div> </div> </div> </div> </div> <div class="row q_T"> <div class="col s12 qrow"> <div class="addq col s12"> <span class="fa fa-plus-circle">add</span> </div> </div> </div> </div>';

  $(document).on("click", ".addqrow", function() {
    $(newqrow).insertAfter(".Question:last");
    runDrag();
  });

  $(document).on("click", ".deleteq", function() {
    var row = $(this).closest(".Question");
    $(this).closest(".row").remove();
    checkRow(row);
  });

  function checkRow(row) {
    if (row.find(":not(.q_T) .qrow").length == 1) {
      row.find(".qrow .deleteq span").hide();
    } else {
      row.find(".qrow .deleteq span").show();
    }
    row.find(".row:not(:first) input").each(function(i, x) {
      $(this).attr("placeholder", "Option " + (i + 1))
    })
  }

  function runDrag() {
    $(".sortAble").sortable({
      revert: true,
      items: ".row.none"
    });
  }
  runDrag();

  $(".Tools").css("width", $(".Tools").width())
  moveScroller();



})

function moveScroller() {
  var $anchor = $("#scroller-anchor");
  var $scroller = $('.Tools');

  var move = function() {
    var st = $(window).scrollTop();
    var ot = $anchor.offset().top;
    if (st > ot) {
      $scroller.css({
        position: "fixed",
        top: "100px"
      });
    } else {
      $scroller.css({
        position: "relative",
        top: ""
      });
    }
  };
  $("#s4-workspace").scroll(move);
  move();
}
.Create_Survey_Container .container {
  width: 400px;
}

.Create_Survey_Container .container .questions {
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  word-wrap: break-word;
}

.Create_Survey_Container .container .questions .con {
  border-left: 2px solid white;
  padding-bottom: 30px;
}

.Create_Survey_Container .container .questions .con .q_T {
  display: none;
}

.Create_Survey_Container .container .questions .con.conselect {
  border-left: 2px solid #4d90fe;
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
}

.Create_Survey_Container .container .questions .con.conselect .q_T {
  display: block;
}

.Create_Survey_Container .container .questions .con.conselect .qrow:hover .sort span {
  display: block;
}

.Create_Survey_Container .container .questions .con:first-of-type {
  padding-top: 30px;
}

.Create_Survey_Container .container .questions .Title .row {
  padding: 0 40px;
  margin-bottom: 0px;
}

.Create_Survey_Container .container .questions .Title .row.none {
  padding: 0 00px;
}

.Create_Survey_Container .container .questions .Title .row .input-field {
  margin-top: 0px;
}

.Create_Survey_Container .container .questions .Question {
  padding-top: 10px;
}

.Create_Survey_Container .container .questions .Question .row {
  padding: 0 40px;
  margin-bottom: 0px;
}

.Create_Survey_Container .container .questions .Question .row.none {
  padding: 0 0px;
}

.Create_Survey_Container .container .questions .Question .row .input-field {
  margin-top: 0px;
}

.Create_Survey_Container .container .questions .Question .row .qrow .sort {
  text-align: center;
  width: 28px;
}

.Create_Survey_Container .container .questions .Question .row .qrow .sort span {
  color: #a9a9a9;
  padding-top: 17px;
  display: none;
  cursor: pointer;
}

.Create_Survey_Container .container .questions .Question .row .qrow .qoption input {
  float: left;
  width: 85%;
}

.Create_Survey_Container .container .questions .Question .row .qrow .qoption .icon {
  height: 25px;
  width: 25px;
  float: left;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 20px;
  margin-top: 10px;
  opacity: 0.3;
}

.Create_Survey_Container .container .questions .Question .row .qrow .qoption .icon.radioicon {
  background-image: url('../img/Radio.png');
}

.Create_Survey_Container .container .questions .Question .row .qrow .qoption .icon.checkboxicon {
  background-image: url('../img/Checkbox.png');
}

.Create_Survey_Container .container .questions .Question .row .qrow .qoption .deleteq {
  text-align: right;
}

.Create_Survey_Container .container .questions .Question .row .qrow .qoption .deleteq span {
  color: #a9a9a9;
  padding-top: 17px;
}

.Create_Survey_Container .container .questions .Question .row .qrow>div {
  display: inline-block;
}

.Create_Survey_Container .container .questions .Question .row .qrow .addq {
  text-align: center;
  margin-top: 10px;
}

.Create_Survey_Container .container .questions .Question .row .qrow .addq span {
  font-size: 25px;
  color: #a9a9a9;
  cursor: pointer;
}

.Create_Survey_Container .container .questions .Question .row .qrow .addq span:hover {
  color: #000;
}

.Create_Survey_Container .container .Tools {
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
}

.Create_Survey_Container .container .Tools ul li {
  height: 36px;
  text-align: center;
  line-height: 36px;
  padding-top: 3px;
}

.Create_Survey_Container .container .Tools ul li:hover {
  background-color: #f2f2f2;
}

.Create_Survey_Container .container .Tools ul li span {
  cursor: pointer;
  font-size: 18px;
}

.Create_Survey_Container .container .CreateSurvey {
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  display: inline-block;
  padding: 10px 20px;
  float: right;
  cursor: pointer;
}

.Create_Survey_Container .container .CreateSurvey:hover {
  background-color: #f2f2f2;
}

.selector {
  width: 100%;
  height: 35px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background-color: #f5f5f5;
  top: 10px;
}

.selector.active {
  overflow: visible;
}

.selector.active .items {
  border: 1px solid #9e9e9e;
  background-color: #fff;
}

.selector.active .items .item:hover {
  background-color: #f5f5f5;
}

.selector .items {
  position: absolute;
  width: 100%;
}

.selector .items .item {
  padding: 0 15px;
  height: 35px;
  line-height: 35px;
  cursor: pointer;
}

.selector .items .item .checkboxicon {
  background-image: url('../img/Checkbox_Checked.png');
  display: inline-block;
  width: 25px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: 0px 10px;
  background-size: 15px 15px;
  float: left;
}

.selector .items .item .radioicon {
  background-image: url('../img/Radio_Checked.png');
  display: inline-block;
  width: 25px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: 0px 10px;
  background-size: 15px 15px;
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="Create_Survey_Container">
  <div class="container">
    <div class="row">
      <div class="col-md-11">
        <div class="questions">
          <div class="Title con">
            <div class="row">
              <div class="input-field col s12">
                <input id="Title" type="text" class="" placeholder="Title">
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12">
                <input id="Desciption" type="text" class="" placeholder="Description">
              </div>
            </div>
          </div>
          <div class="Question con">
            <div class="row">
              <div class="input-field col s8">
                <input id="" type="text" class="" placeholder="Question Title">
              </div>
              <div class="settings input-field col s4">
                <div class="selector">
                  <div class="items">
                    <div class="item selected">
                      <span class="radioicon"></span>Choice
                    </div>
                    <div class="item">
                      <span class="checkboxicon"></span>Checkbox
                    </div>
                    <div class="item">
                      Dropdown
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="sortAble">
              <div class="row none">
                <div class="col s12 qrow">
                  <div class="sort col s1">
                    <span class="fa fa-sort">s</span>
                  </div>
                  <div class="qoption col s11">
                    <div class="icon radioicon">

                    </div>
                    <input type="text" class="" placeholder="Option 1">
                    <div class="deleteq">
                      <span class="fa fa-times" style="display:none;"></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row q_T">
              <div class="col s12 qrow">
                <div class="addq col s12">
                  <span class="fa fa-plus-circle">add</span>
                </div>
              </div>
            </div>
          </div>
          <div class="Question con">
            <div class="row">
              <div class="input-field col s8">
                <input id="" type="text" class="" placeholder="Question Title">
              </div>
              <div class="settings input-field col s4">
                <div class="selector">
                  <div class="items">
                    <div class="item selected">
                      <span class="radioicon"></span>Choice
                    </div>
                    <div class="item">
                      <span class="checkboxicon"></span>Checkbox
                    </div>
                    <div class="item">
                      Dropdown
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="sortAble">
              <div class="row none">
                <div class="col s12 qrow">
                  <div class="sort col s1">
                    <span class="fa fa-sort">s</span>
                  </div>
                  <div class="qoption col s11">
                    <div class="icon radioicon">

                    </div>
                    <input type="text" class="" placeholder="Option 1">
                    <div class="deleteq">
                      <span class="fa fa-times" style="display:none;"></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row q_T">
              <div class="col s12 qrow">
                <div class="addq col s12">
                  <span class="fa fa-plus-circle">add</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-1">
        <div id="scroller-anchor"></div>
        <div class="Tools">
          <ul>
            <li>
              <span class="addqrow fa fa-plus-circle">Add Question</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-11">
        <div class="CreateSurvey">
          Create survey
        </div>
      </div>
    </div>
  </div>


</div>

【问题讨论】：

    标签： jquery jquery-ui jquery-ui-sortable


    【解决方案1】：

    所以我发现了（我认为）导致行跳动的主要问题。

    我添加了以下内容：

    .sortAble {
  position: relative;
}

    这使得滚动相对于已排序行的直接父级。

    我还将runDrag 函数更改为：

    function runDrag( el ) {
    if( !el ) {
      el = $(".sortAble");
    }
    el.sortable({
      revert: true,
      items: "> .row.none"
    });
}

    我添加了一个可选参数，我在 .addq 事件 (runDrag($(".Question:last .sortAble"));) 中传递该参数 - 这将使滚动启动时仅启动新添加的元素，而不是所有现有元素。

    这是完整的工作示例：

    $(document).ready(function() {
  console.clear();
  $(document).on("focus", "input", function() {
    $(".conselect").removeClass("conselect");
    $(this).closest(".con").addClass("conselect");
  });

  $(document).on("click", ".selector .item", function() {
    $(this).closest(".con").find(".selected").removeClass("selected");
    if ($(this).closest(".selector").hasClass("active")) {
      var i = $(this).index();

      $(this).closest(".items").css("top", -(i * 35));
      $(this).addClass("selected");
      var selectedclass = $(this).find("span").attr("class");
      $(this).closest(".con").find(".icon").removeClass("choiceicon checkboxicon").addClass(selectedclass);
    } else {
      $(this).addClass("selected");
    }
    $(this).closest(".selector").toggleClass("active");
  });

  $(document).on("click", ".addq", function() {
    var newrow = $(this).closest(".row").prev(".sortAble").find(".row:last").clone();
    var i = $(this).closest(".row").index();
    newrow.find("input").val("").attr("placeholder", "Option " + i);
    newrow.appendTo($(this).closest(".row").prev(".sortAble"));
    // $(this).closest(".Question").find(".row:not(:first) input").each(function(i,x){
    //     $(this).attr("placeholder", "Option "+ (i + 1))
    // })
    checkRow($(this).closest(".Question"));
  });

  var newqrow = '<div class="Question con"> <div class="row"> <div class="input-field col s8"> <input  type="text" class="" placeholder="Question Title"> </div> <div class="settings input-field col s4"> <div class="selector"> <div class="items"> <div class="item selected"> <span class="radioicon"></span>Choice </div> <div class="item"> <span class="checkboxicon"></span>Checkbox </div> <div class="item"> Dropdown </div> </div> </div> </div> </div> <div class="sortAble"> <div class="row none"> <div class="col s12 qrow"> <div class="sort col s1"> <span class="fa fa-sort">s</span> </div> <div class="qoption col s11"> <div class="icon radioicon"> </div> <input type="text" class="" placeholder="Option 1"> <div class="deleteq"> <span class="fa fa-times"></span> </div> </div> </div> </div> </div> <div class="row q_T"> <div class="col s12 qrow"> <div class="addq col s12"> <span class="fa fa-plus-circle">add</span> </div> </div> </div> </div>';

  $(document).on("click", ".addqrow", function() {
    $(newqrow).insertAfter(".Question:last");
    runDrag($(".Question:last .sortAble"));
  });

  $(document).on("click", ".deleteq", function() {
    var row = $(this).closest(".Question");
    $(this).closest(".row").remove();
    checkRow(row);
  });

  function checkRow(row) {
    if (row.find(":not(.q_T) .qrow").length == 1) {
      row.find(".qrow .deleteq span").hide();
    } else {
      row.find(".qrow .deleteq span").show();
    }
    row.find(".row:not(:first) input").each(function(i, x) {
      $(this).attr("placeholder", "Option " + (i + 1))
    })
  }

  function runDrag( el ) {
    if( !el ) {
      el = $(".sortAble");
    }
    el.sortable({
      revert: true,
      items: "> .row.none"
    });
  }
  runDrag();

  $(".Tools").css("width", $(".Tools").width())
  moveScroller();



})

function moveScroller() {
  var $anchor = $("#scroller-anchor");
  var $scroller = $('.Tools');

  var move = function() {
    var st = $(window).scrollTop();
    var ot = $anchor.offset().top;
    if (st > ot) {
      $scroller.css({
        position: "fixed",
        top: "100px"
      });
    } else {
      $scroller.css({
        position: "relative",
        top: ""
      });
    }
  };
  $("#s4-workspace").scroll(move);
  move();
}
    .Create_Survey_Container .container {
  width: 400px;
}

.Create_Survey_Container .container .questions {
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  word-wrap: break-word;
}

.Create_Survey_Container .container .questions .con {
  border-left: 2px solid white;
  padding-bottom: 30px;
}

.Create_Survey_Container .container .questions .con .q_T {
  display: none;
}

.Create_Survey_Container .container .questions .con.conselect {
  border-left: 2px solid #4d90fe;
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
}

.Create_Survey_Container .container .questions .con.conselect .q_T {
  display: block;
}

.Create_Survey_Container .container .questions .con.conselect .qrow:hover .sort span {
  display: block;
}

.Create_Survey_Container .container .questions .con:first-of-type {
  padding-top: 30px;
}

.Create_Survey_Container .container .questions .Title .row {
  padding: 0 40px;
  margin-bottom: 0px;
}

.Create_Survey_Container .container .questions .Title .row.none {
  padding: 0 00px;
}

.Create_Survey_Container .container .questions .Title .row .input-field {
  margin-top: 0px;
}

.Create_Survey_Container .container .questions .Question {
  padding-top: 10px;
}

.Create_Survey_Container .container .questions .Question .row {
  padding: 0 40px;
  margin-bottom: 0px;
}

.Create_Survey_Container .container .questions .Question .row.none {
  padding: 0 0px;
}

.Create_Survey_Container .container .questions .Question .row .input-field {
  margin-top: 0px;
}

.Create_Survey_Container .container .questions .Question .row .qrow .sort {
  text-align: center;
  width: 28px;
}

.Create_Survey_Container .container .questions .Question .row .qrow .sort span {
  color: #a9a9a9;
  padding-top: 17px;
  display: none;
  cursor: pointer;
}

.Create_Survey_Container .container .questions .Question .row .qrow .qoption input {
  float: left;
  width: 85%;
}

.Create_Survey_Container .container .questions .Question .row .qrow .qoption .icon {
  height: 25px;
  width: 25px;
  float: left;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 20px;
  margin-top: 10px;
  opacity: 0.3;
}

.Create_Survey_Container .container .questions .Question .row .qrow .qoption .icon.radioicon {
  background-image: url('../img/Radio.png');
}

.Create_Survey_Container .container .questions .Question .row .qrow .qoption .icon.checkboxicon {
  background-image: url('../img/Checkbox.png');
}

.Create_Survey_Container .container .questions .Question .row .qrow .qoption .deleteq {
  text-align: right;
}

.Create_Survey_Container .container .questions .Question .row .qrow .qoption .deleteq span {
  color: #a9a9a9;
  padding-top: 17px;
}

.Create_Survey_Container .container .questions .Question .row .qrow>div {
  display: inline-block;
}

.Create_Survey_Container .container .questions .Question .row .qrow .addq {
  text-align: center;
  margin-top: 10px;
}

.Create_Survey_Container .container .questions .Question .row .qrow .addq span {
  font-size: 25px;
  color: #a9a9a9;
  cursor: pointer;
}

.Create_Survey_Container .container .questions .Question .row .qrow .addq span:hover {
  color: #000;
}

.Create_Survey_Container .container .Tools {
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
}

.Create_Survey_Container .container .Tools ul li {
  height: 36px;
  text-align: center;
  line-height: 36px;
  padding-top: 3px;
}

.Create_Survey_Container .container .Tools ul li:hover {
  background-color: #f2f2f2;
}

.Create_Survey_Container .container .Tools ul li span {
  cursor: pointer;
  font-size: 18px;
}

.Create_Survey_Container .container .CreateSurvey {
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  display: inline-block;
  padding: 10px 20px;
  float: right;
  cursor: pointer;
}

.Create_Survey_Container .container .CreateSurvey:hover {
  background-color: #f2f2f2;
}

.selector {
  width: 100%;
  height: 35px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background-color: #f5f5f5;
  top: 10px;
}

.selector.active {
  overflow: visible;
}

.selector.active .items {
  border: 1px solid #9e9e9e;
  background-color: #fff;
}

.selector.active .items .item:hover {
  background-color: #f5f5f5;
}

.selector .items {
  position: absolute;
  width: 100%;
}

.selector .items .item {
  padding: 0 15px;
  height: 35px;
  line-height: 35px;
  cursor: pointer;
}

.selector .items .item .checkboxicon {
  background-image: url('../img/Checkbox_Checked.png');
  display: inline-block;
  width: 25px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: 0px 10px;
  background-size: 15px 15px;
  float: left;
}

.selector .items .item .radioicon {
  background-image: url('../img/Radio_Checked.png');
  display: inline-block;
  width: 25px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: 0px 10px;
  background-size: 15px 15px;
  float: left;
}

.sortAble {
  position: relative;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="Create_Survey_Container">
  <div class="container">
    <div class="row">
      <div class="col-md-11">
        <div class="questions">
          <div class="Title con">
            <div class="row">
              <div class="input-field col s12">
                <input id="Title" type="text" class="" placeholder="Title">
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12">
                <input id="Desciption" type="text" class="" placeholder="Description">
              </div>
            </div>
          </div>
          <div class="Question con">
            <div class="row">
              <div class="input-field col s8">
                <input id="" type="text" class="" placeholder="Question Title">
              </div>
              <div class="settings input-field col s4">
                <div class="selector">
                  <div class="items">
                    <div class="item selected">
                      <span class="radioicon"></span>Choice
                    </div>
                    <div class="item">
                      <span class="checkboxicon"></span>Checkbox
                    </div>
                    <div class="item">
                      Dropdown
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="sortAble">
              <div class="row none">
                <div class="col s12 qrow">
                  <div class="sort col s1">
                    <span class="fa fa-sort">s</span>
                  </div>
                  <div class="qoption col s11">
                    <div class="icon radioicon">

                    </div>
                    <input type="text" class="" placeholder="Option 1">
                    <div class="deleteq">
                      <span class="fa fa-times" style="display:none;"></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row q_T">
              <div class="col s12 qrow">
                <div class="addq col s12">
                  <span class="fa fa-plus-circle">add</span>
                </div>
              </div>
            </div>
          </div>
          <div class="Question con">
            <div class="row">
              <div class="input-field col s8">
                <input id="" type="text" class="" placeholder="Question Title">
              </div>
              <div class="settings input-field col s4">
                <div class="selector">
                  <div class="items">
                    <div class="item selected">
                      <span class="radioicon"></span>Choice
                    </div>
                    <div class="item">
                      <span class="checkboxicon"></span>Checkbox
                    </div>
                    <div class="item">
                      Dropdown
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="sortAble">
              <div class="row none">
                <div class="col s12 qrow">
                  <div class="sort col s1">
                    <span class="fa fa-sort">s</span>
                  </div>
                  <div class="qoption col s11">
                    <div class="icon radioicon">

                    </div>
                    <input type="text" class="" placeholder="Option 1">
                    <div class="deleteq">
                      <span class="fa fa-times" style="display:none;"></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row q_T">
              <div class="col s12 qrow">
                <div class="addq col s12">
                  <span class="fa fa-plus-circle">add</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-1">
        <div id="scroller-anchor"></div>
        <div class="Tools">
          <ul>
            <li>
              <span class="addqrow fa fa-plus-circle">Add Question</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-11">
        <div class="CreateSurvey">
          Create survey
        </div>
      </div>
    </div>
  </div>


</div>

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2013-03-15
      • 2015-11-04
      • 2014-04-28
      • 1970-01-01
      • 2012-06-26
      • 1970-01-01
      • 2013-07-12
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode