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

$(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>