gpt4 book ai didi

javascript - 某种获取拖放列表值的方法?

转载 作者:行者123 更新时间:2023-11-28 01:33:30 24 4
gpt4 key购买 nike

我正在寻找一些拖放列表,我找到了这个:

https://codepen.io/Liskanth/pen/wqaReo

$(function() {
$( "ul" ).sortable();
$( "ul" ).disableSelection();
});

我有一个带有一些图片的旋转木马,我的目标是像列表中的示例一样编辑此图片顺序,但我不知道如何通过 jquery o 以某种方式获取此有序列表的值。

编辑

共享代码

<div class='csslider1 autoplay '>
<input name="cs_anchor1" id='cs_slide1_0' type="radio" class='cs_anchor slide' >
<input name="cs_anchor1" id='cs_slide1_1' type="radio" class='cs_anchor slide' >
<input name="cs_anchor1" id='cs_slide1_2' type="radio" class='cs_anchor slide' >
<input name="cs_anchor1" id='cs_slide1_3' type="radio" class='cs_anchor slide' >
<input name="cs_anchor1" id='cs_slide1_4' type="radio" class='cs_anchor slide' >
<input name="cs_anchor1" id='cs_slide1_5' type="radio" class='cs_anchor slide' >
<input name="cs_anchor1" id='cs_play1' type="radio" class='cs_anchor' checked>
<input name="cs_anchor1" id='cs_pause1_0' type="radio" class='cs_anchor pause'>
<input name="cs_anchor1" id='cs_pause1_1' type="radio" class='cs_anchor pause'>
<input name="cs_anchor1" id='cs_pause1_2' type="radio" class='cs_anchor pause'>
<input name="cs_anchor1" id='cs_pause1_3' type="radio" class='cs_anchor pause'>
<input name="cs_anchor1" id='cs_pause1_4' type="radio" class='cs_anchor pause'>
<input name="cs_anchor1" id='cs_pause1_5' type="radio" class='cs_anchor pause'>
<ul>
<li class="cs_skeleton"><img src="cssslider_files/csss_images1/image1.jpg" style="width: 100%;"></li>
<li class='num0 img slide'> <img src='cssslider_files/csss_images1/image1.jpg' alt='banner1' title='banner1' /></li>
<li class='num1 img slide'> <img src='cssslider_files/csss_images1/image2.jpg' alt='banner2' title='banner2' /></li>
<li class='num2 img slide'> <img src='cssslider_files/csss_images1/image3.jpg' alt='banner3' title='banner3' /></li>
<li class='num3 img slide'> <img src='cssslider_files/csss_images1/image4.jpg' alt='banner4' title='banner4' /></li>
<li class='num4 img slide'> <img src='cssslider_files/csss_images1/image5.jpg' alt='banner5' title='banner5' /></li>
<li class='num5 img slide'> <img src='cssslider_files/csss_images1/image6.jpg' alt='banner6' title='banner6' /></li>
</ul>


<div class='cs_arrowprev'>
<label class='num0' for='cs_slide1_0'><span><i></i><b></b></span></label>
<label class='num1' for='cs_slide1_1'><span><i></i><b></b></span></label>
<label class='num2' for='cs_slide1_2'><span><i></i><b></b></span></label>
<label class='num3' for='cs_slide1_3'><span><i></i><b></b></span></label>
<label class='num4' for='cs_slide1_4'><span><i></i><b></b></span></label>
<label class='num5' for='cs_slide1_5'><span><i></i><b></b></span></label>
</div>
<div class='cs_arrownext'>
<label class='num0' for='cs_slide1_0'><span><i></i><b></b></span></label>
<label class='num1' for='cs_slide1_1'><span><i></i><b></b></span></label>
<label class='num2' for='cs_slide1_2'><span><i></i><b></b></span></label>
<label class='num3' for='cs_slide1_3'><span><i></i><b></b></span></label>
<label class='num4' for='cs_slide1_4'><span><i></i><b></b></span></label>
<label class='num5' for='cs_slide1_5'><span><i></i><b></b></span></label>
</div>
<div class='cs_bullets'>
<label class='num0' for='cs_slide1_0'> <span class='cs_point'></span>
</label>
<label class='num1' for='cs_slide1_1'> <span class='cs_point'></span>
</label>
<label class='num2' for='cs_slide1_2'> <span class='cs_point'></span>
</label>
<label class='num3' for='cs_slide1_3'> <span class='cs_point'></span>
</label>
<label class='num4' for='cs_slide1_4'> <span class='cs_point'></span>
</label>
<label class='num5' for='cs_slide1_5'> <span class='cs_point'></span>
</label>
</div>
</div>

最佳答案

作为开始,您需要挂接到 .sortable() 内部的一个事件,该事件将返回有关被拖动内容的信息(其文档位于:http://api.jqueryui.com/sortable)

然后您可以使用 jQuery 深入了解列表。

这是我组装的一个例子: https://codepen.io/anon/pen/MXmzvL

$(function() {
$( "ul" ).sortable(
{
stop: function( event, ui ) {
var idList = [];
$("ul").children("li").each(function(){
idList.push($(this).attr('id'));
});

console.log(idList);
}
}
);
$( "ul" ).disableSelection();
});

请注意,我向 li 元素添加了 id 以帮助跟踪,但您可以改为使用内容来做到这一点。

关于javascript - 某种获取拖放列表值的方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50823551/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com