可排序的句柄，总是向左拖动动画

Question

我试图将拖动动画的偏移量从手柄翻转到右侧，而不是左侧。每当我想拖动它时，当手柄在右侧时，动画会自动从左侧开始。我希望它从右边开始。

    <ol class='leerrails_list'>
    
       
       <li>
         <a href="leertraject.asp?dlt_id=<%=lt3_id%>"> 
        <div class = "leerrails_list_img" 
             style="background-image:url('/_domains/bz_bluelearning_nl/images/aanbod/feedback en Fu_up@2x.png');" ></div>
              <p>Feedback</p>
          <span class = "label2" >Managementrol</span>
          <div class = "leerrails_list_voortgang_blok">
               <div class = "leerrails_list_voortgang" style = "width:64px;"></div>
          </div>
          </a>
          <i class="fas fa-sort"></i>  
           </li>
          
    
          
            <li>
              <a href="https://bz.bluelearning.nl/leerplein/olo_inschrijven_bz.asp?lt_id=31">  
        <div class = "leerrails_list_img" 
            style="background-image:url('/_domains/bz_bluelearning_nl/images/aanbod/Beinvloeden van systemen@2x.png');"></div>
              <p>Beïnvloeden in het systeem</p>
          <span class = "label2" >Managementrol</span>
          <div class = "leerrails_list_voortgang_blok">
               <div class = "leerrails_list_voortgang" style = "width:64px;"></div>
          </div>
          </a>
          <i class="fas fa-sort"></i>  
           </li>
    
           
            <li>
              <a href="https://bz.bluelearning.nl/leerplein/olo_inschrijven_bz.asp?lt_id=38">  
        <div class = "leerrails_list_img" 
            style="background-image:url('/_domains/bz_bluelearning_nl/images/aanbod/Sturen_adviseren in een politiek bestuurlijke omgeving@2x.png');"></div>
              <p>Adviseren in een politiek-bestuurlijke omgeving</p>
          <span class = "label2" >Managementrol</span>
          <div class = "leerrails_list_voortgang_blok">
               <div class = "leerrails_list_voortgang" style = "width:64px;"></div>
          </div>
          </a>
          <i class="fas fa-sort"></i>  
           </li>
    
            <li>
              <a href="https://bz.bluelearning.nl/leerplein/olo_inschrijven_bz.asp?lt_id=21">  
        <div class = "leerrails_list_img" 
            style="background-image:url('/_domains/bz_bluelearning_nl/images/aanbod/love module@2x.png');"></div>
              <p>LOVE Module</p>
          <span class = "label1" >Persoonlijk leiderschap</span>
          <div class = "leerrails_list_voortgang_blok">
               <div class = "leerrails_list_voortgang" style = "width:64px;"></div>
          </div>
          </a>
          <i class="fas fa-sort"></i>  
           </li>
          
    
          <!--inactieve li -->
    
          
          <li class = "leerroute_item_inactief">
            <i class="fas fa-sort" style= "display:none;"></i>
            <div class = "leerrails_list_img"></div>
            <div class = "leerrails_list_inactief"></div>
              <p>Hier komt uw e-module</p>
            </li>
           
    
        
    </ol>
    
    <script>
      $(function  () {
      $("ol.leerrails_list").sortable();
      
    });
    
    
    $("ol.leerrails_list").sortable({
      group: 'no-drop',
      handle: 'i.fa-sort',
      onDragStart: function ($item, container, _super) {
        // Duplicate items of the no drop area
        if(!container.options.drop)
          $item.clone().insertAfter($item);
        _super($item, container);
      }
    });
    
    
    </script>

<style>
 .leerroute_overige {
    position: relative;

   }

   @media (max-width:1060px){

      .leerroute_overige {
         position: relative;
         -webkit-margin-before: 10px;
         -webkit-margin-after: 40px;
         margin-bottom: 20px;
         width: 100%;
         left: 30px;
         margin-top: 0px;
     }
 }
      

   
 

 ol.leerrails_list .leerrails_list_img::before{
   content: '';
position: relative;
height: 10px;
width: 10px;
background-color: rgb(255, 255, 255);
border: 1px solid red;
border-radius: 50%;
display: inline-flex;
left: -38px;
margin-right: -15px;
top: 30%;
 }

 ol.leerrails_list li.leerroute_item_inactief .leerrails_list_img::before{
   content: '';
position: relative;
height: 10px;
width: 10px;
background-color: rgb(255, 255, 255);
border: 1px solid red;
border-radius: 50%;
display: inline-flex;
left: -38px;
margin-right: -15px;
top: 30%;
 }

 ol.leerrails_list .leerroute_actief {
   content: '';
   position: relative;
   height: 10px;
   width: 10px;
   background-color: rgb(255, 0, 0);
   border: 1px solid red;
   border-radius: 50%;
   display: inline-flex;
   left: -46px;
   margin-right: -15px;
   top: 30%;
   
 }

 ol.leerrails_list .leerrails_list_img::before:hover {
   content: '';
   position: relative;
   height: 10px;
   width: 10px;
   background-color: rgb(255, 0, 0);
   border: 1px solid red;
   border-radius: 50%;
   display: inline-flex;
   left: -46px;
   margin-right: -15px;
   top: 30%;
   
 }

 ol.leerrails_list .leerrails_list_img::before:first-of-type {
   content: '';
   position: relative;
   height: 10px;
   width: 10px;
   background-color: rgb(255, 0, 0);
   border: 1px solid red;
   border-radius: 50%;
   display: inline-flex;
   left: -46px;
   margin-right: -15px;
   top: 30%;
   
   
}

ol.leerrails_list .leerrails_list_img::before:visited {
   content: '';
   position: relative;
   height: 10px;
   width: 10px;
   background-color: rgb(255, 0, 0);
   border: 1px solid red;
   border-radius: 50%;
   display: inline-flex;
   left: -46px;
   margin-right: -15px;
   top: 30%;
   
   
}

ol.leerrails_list .leerrails_list_img::before:active {
   content: '';
   position: relative;
   height: 10px;
   width: 10px;
   background-color: rgb(255, 0, 0);
   border: 1px solid red;
   border-radius: 50%;
   display: inline-flex;
   left: -46px;
   margin-right: -15px;
   top: 30%;

}

ol.leerrails_list {

   list-style-type: none;
  counter-reset: my-counter;
 }

 ol.leerrails_list a {
    color: black;
    text-decoration: none;
    
 }


 ol.leerrails_list::before{
   content: '';
   position: absolute;
   border-left: 4px dotted #8f8f8f;
   left: -24px;
   bottom: 0;
   top: 0;
   transform: translate3d(31px, 0, 0);
 }
 

 ol.leerrails_list .leerrails_list_img{
    position: relative;
    z-index: 3;
   height:88px;
   width: 100px;
   float: left;
   cursor: pointer;
   background-size: cover;
   background-position-x: center;   
   opacity: 1;
   background-repeat: no-repeat;

   
}

 ol.leerrails_list li p {
   position: relative;
top: 10px;
left: 20px;
text-align: left;
}

ol.leerrails_list span.label1 {
   position: relative;
   top: 0px;
   left: 20px;
   text-align: left;
   font-size: 11px;
   background: #037912;
   color: white;
   padding: 5px;
   border-radius: 3px;
}

ol.leerrails_list span.label2 {
   position: relative;
   top: 0px;
   left: 20px;
   text-align: left;
   font-size: 11px;
   background: #008DC2;
   color: white;
   padding: 5px;
   border-radius: 3px;
}



/*
ol.leerrails_list a {
   position: relative;
   margin: 20px 30px;
   color: white;
   top: 30%;
}
*/

ol.leerrails_list a:hover{
   background-size: 100px 100px;
   transition: .1s ease-in-out;
   position: relative;
   margin: 20px 0px;
   color: black;  
}



 
 
 ol.leerrails_list li.placeholder {
   position: relative;
   /** More li styles **/
 }
 ol.leerrails_list li.placeholder:before {
   position: absolute;
   /** Define arrowhead **/
 }

 ol.leerrails_list li::before{
   content: counter(my-counter);
   background: transparent;
   font-size: 25px;
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
   display:block;
   line-height: 5.8rem;
   color: #7e7e7e;
   text-align: left;
   margin-right: 20rem;
    position: absolute;
    float: left;
   margin-left: -60px;
    
 }
 
 /*

 ol.leerrails_list li.leerroute_item_inactief::before{
   content: counter(my-counter);
   background: transparent;
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
   display:block;
   line-height: 5.8rem;
   color: rgb(136, 136, 136);
   text-align: left;
   margin-right: 20rem;
   position: absolute;
   left: -60px;
   
  
    
 }
 */
 

 ol.leerrails_list li {
   counter-increment: my-counter;
   font-family: 'Lato';
   height: 88px;
   width: 470px;
   background: white;
   margin-bottom: 10px;
   box-shadow: 0px 2px 2px 2px #00000040;
   cursor: pointer;
}



ol.leerrails_list li.leerroute_item_inactief {
   counter-increment: my-counter;
   font-family: 'Lato';
   height: 88px;
   width: 470px;
   background: rgba(255, 255, 255, 0);
   border: 1px solid grey;
   margin-bottom: 10px;
   cursor: pointer;
   position: relative;
   box-shadow: none;
}

ol.leerrails_list li.leerroute_item_inactief:hover{
   box-shadow: none;
}

@media (max-width:1060px){
   ol.leerrails_list li.leerroute_item_inactief {
      width: 90%;

   }

}

ol.leerrails_list li.leerroute_item_inactief p{
   margin: 17px 60px;
   /* text-align: center; */
   padding: 5px;
   color: grey;
   font-weight: 300;
}

/*
ol.leerrails_list li i.fas {
   position: absolute;
   left: 100%;
}
*/




ol.leerrails_list li i.fa-sort {
   font-size: 19px;
   position: relative;
   color: gray;
   border: none;
   padding: 8px;
   z-index: 100;
   float: right;
   top: -64px;
   
}



ol.leerrails_list li.leerroute_item_inactief i.fa-sort {
   font-size: 19px;
   position: absolute;
   
   margin-left: 85%;
   color: gray;
   border: none;
   padding: 6px;
   z-index: 100;
   
}
   
   


@media (max-width:1060px){

   ol.leerrails_list li {
      width: 90%;

   }


}



 ol.leerrails_list li:hover {
    z-index: 100;
   background: #f8f8f8;
   box-shadow: 0px 3px 3px 3px #0000006b;
   transition: .1s ease-in-out;

 }


 ol.leerrails_list .leerrails_list_voortgang{
   height: 6px;
   background: rgba(0,200,83,1);
   top: 0px;
   position: relative;
   left: 0px;
   z-index: 0;
 }

 @media (max-width:1060px){
   ol.leerrails_list .leerrails_list_voortgang {
      width: 100%;
    position: relative;
    max-width: -webkit-fill-available;
    

   }

 }

 ol.leerrails_list .leerrails_list_voortgang_blok {
   width: 370px;
   height: 6px;
   background: rgb(233, 233, 233);
   top: 23px;
   position: relative;
   left: 0px;
   z-index: 0;
   margin-left: 100px;
    
 }

 @media (max-width:1060px){
   ol.leerrails_list .leerrails_list_voortgang_blok {
      width: 100%;
      position: relative;
      max-width: -webkit-fill-available;
      max-width: -moz-available;

      }

 }

 ol.leerrails_list .leerrails_list_img .img_1 {
    display: block;
    content: '';
    height: 100px;
    width: 100px;
    border: 1px solid black;
    background-image: url("../images/aanbod/Diversiteit en inclusie.png");
 }
</style>

enter image description here enter image description here

Answer 1

我tested your setup 运行良好，您显示的问题不会发生。确保您拥有运行 JQuery Sortable 所需的所有依赖项。

• jquery.js
• jquery-ui.js
• jquery-ui.css（这是我对你缺少什么的猜测）

除了可能缺少的依赖项之外，您的 CSS 设置还会发生一些奇怪的事情。您应该考虑将可拖动 li 的布局切换为使用 Flex 或 Grid，而不是使用一堆嵌套的相对和绝对定位容器，特别是因为 JQuery UI Sortable 将为被拖动的项目添加绝对定位，这将导致嵌套的布局跳转相对定位的项目。

some code to keep Stack Overflow off my back for sharing a Fiddle, the code in the Fiddle is the original code shared.