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

Question

我在jQuery UI Sortable上遇到了问题。

如果您运行演示，然后单击 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>

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