Какой-нибудь способ получить значение списка перетаскивания? - PullRequest
Новая
       10

Какой-нибудь способ получить значение списка перетаскивания?

0 голосов
/ 12 июня 2018

Я ищу какой-то список перетаскивания и нашел это:

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

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

У меня есть карусель с некоторыми фотографиями, моя цель - редактировать эти изображенияпорядок, как в примере со списком, но я не знаю, как получить значение этого упорядоченного списка с помощью jquery o.

EDIT

Sharedкод 

<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>

1 Ответ

0 голосов
/ 12 июня 2018

Для начала вам нужно подключиться к событию внутри .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, чтобы помочь отслеживать, но вы можетевместо этого сделайте это с содержимым.

...