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

Question

我对jQuery UI Sortable有疑问。

如果您运行演示，然后点击option 1，然后点击添加（它将添加一个新选项。在每个选项的左侧，当您将鼠标悬停时，会有{{1}如果你＆＃34;抓住＆＃34;你可以在其父容器内拖动选项。所有这一切都正常。

但是当你点击＆＃34;添加问题＆＃34;，然后尝试拖动任何选项时，他们的行为确实发生了变化，他们有点跳跃，我无法弄清楚为什么？

s

＆＃13;

＆＃13;

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

＆＃13;

$(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();
}

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

所以我发现了一个主要问题（我认为）让行跳了起来。

我添加了以下内容：

@FunctionalInterface
public interface Comparator<T> {

    public int compare(T t1, T t2);

    public default Comparator<T> thenComparing(Comparator<T> cmp){
        return (p1,p2)->compare(p1,p2)==0?cmp.compare(p1, p2):compare(p1,p2);
    } // return an int

    public default Comparator<T> thenComparing(Function<T,Comparable> f){
        return thenComparing(comparing(f)); // return an int
    }

    public static <U>Comparator<U> comparing(Function<U,Comparable> f){
        return (p1,p2)->f.apply(p1).compareTo(f.apply(p2)); // return an int
    }
}

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

我还将.sortAble { position: relative; } 函数更改为：

runDrag

我添加了一个我在function runDrag( el ) { if( !el ) { el = $(".sortAble"); } el.sortable({ revert: true, items: "> .row.none" }); } 事件（.addq）中传递的可选参数 - 这将只使用滚动启动新添加的元素，而不是所有现有元素。< / p>

以下是完整的工作示例：

＆＃13;

＆＃13;

runDrag($(".Question:last .sortAble"));

＆＃13;

$(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();
}

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;