可排序控制柄，始终向左拖动动画

Question

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

<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 [e-mail]');" ></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 [e-mail]');"></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 [e-mail]');"></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 [e-mail]');"></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>

在此处输入图像描述在此处输入图像描述

Answer 1

我测试了你的设置，它运行得很好，你显示的问题没有发生。确保您拥有运行JQuery-Sortable所需的所有依赖项。

• jquery.js
• jquery-ui.js
• jquery-ui.css(这是我对您缺少什么的猜测(

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

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