可排序手柄，拖动动画始终向左
提问于 2020-08-10 07:26:43
我正在尝试将拖动动画的偏移量从控制柄向右翻转，而不是向左。每当我想要拖动它时，当手柄在右边时，动画就会自动从左边开始。我希望它从右边开始。
<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>
回答 1
Stack Overflow用户
发布于 2020-08-10 21:07:21
I 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.页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63335825
复制
腾讯云开发者
