Jquery-ui sortable jumping around when new item is created

Question

I've have a problem with jQuery UI Sortable.

If you run the demo, and click on option 1, then click add (it will add a new option. on the left side of each option, when you hover it, there will be an s. if you "grab" that you can drag the option around inside its parent container. All of this works fine.

But when you click "Add question", and then try to drag any of the options around they act really change, they kinda jumps around and i cant figure out why?

$(".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 = '    
     Choice 
  Checkbox 
  Dropdown 
 
 
 
 
     s 
   
    
 
 
 
 
    add 
 
 
 ';

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










  
    
      
        
          
            
              
                
              
            
            
              
                
              
            
          
          
            
              
                
              
              
                
                  
                    
                      Choice
                    
                    
                      Checkbox
                    
                    
                      Dropdown
                    
                  
                
              
            
            
              
                
                  
                    s
                  
                  
                    

                    
                    
                    
                      
                    
                  
                
              
            
            
              
                
                  add
                
              
            
          
          
            
              
                
              
              
                
                  
                    
                      Choice
                    
                    
                      Checkbox
                    
                    
                      Dropdown
                    
                  
                
              
            
            
              
                
                  
                    s
                  
                  
                    

                    
                    
                    
                      
                    
                  
                
              
            
            
              
                
                  add
                
              
            
          
        
      
      
        
        
          
            
              Add Question
            
          
        
      
    
    
      
        
          Create survey

Alon Eitan · Accepted Answer

So I found the major issue (I think) that made the rows to jump around.

I added the following:

.sortAble {
  position: relative;
}

Which make the scrolling to be relative to the direct parent of the sorted rows.

I also changed the runDrag function to this:

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

I added an optional parameter that I pass in the .addq event (runDrag($(".Question:last .sortAble"));) - This will make only the newly added element to be initiated with the scroll, and not all the existing elements.

Here is the full working example:

$(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 = '    
     Choice 
  Checkbox 
  Dropdown 
 
 
 
 
     s 
   
    
 
 
 
 
    add 
 
 
 ';

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










  
    
      
        
          
            
              
                
              
            
            
              
                
              
            
          
          
            
              
                
              
              
                
                  
                    
                      Choice
                    
                    
                      Checkbox
                    
                    
                      Dropdown
                    
                  
                
              
            
            
              
                
                  
                    s
                  
                  
                    

                    
                    
                    
                      
                    
                  
                
              
            
            
              
                
                  add
                
              
            
          
          
            
              
                
              
              
                
                  
                    
                      Choice
                    
                    
                      Checkbox
                    
                    
                      Dropdown
                    
                  
                
              
            
            
              
                
                  
                    s
                  
                  
                    

                    
                    
                    
                      
                    
                  
                
              
            
            
              
                
                  add
                
              
            
          
        
      
      
        
        
          
            
              Add Question
            
          
        
      
    
    
      
        
          Create survey

Jquery-ui sortable jumping around when new item is created

Answers (1)

Related Questions