сортировка комбинаций <li>и <div>с использованием jquery - PullRequest
Новая
       12

сортировка комбинаций <li>и <div>с использованием jquery

0 голосов
/ 12 мая 2009

Я новичок в Jquery. Я хочу использовать sortableUI для моего datalist. Каждая строка в списке данных содержит текст с серийным номером. Я успешно использовал сортируемый пользовательский интерфейс. Но сейчас Я хочу переместить текст, а не серийный номер при сортировке. Вот мой пример кода. Div отображает серийный номер на верхний левый угол каждого li. Теперь, если я попытаюсь оттащить экземпляр 2-го Ли с 3-м ли, затем 3-й элемент переходит во 2-ю позицию как Правило, но проблема в том, что он идет после Div второго элемента (где это должно быть перед div как первая загрузка). В результате, в соответствии с Div стиль .. серийный номер 1 и 2 перекрываются в позиции 1-го элемента.

Есть ли способ, которым я мог бы использовать div сразу после его соответствующий ли при сортировке? 

<ul id="ulSortable" class="ui-sortable" >
        <li class="Decide_Rank_Item_Li">test A</li>
        <div class="DisplayOrder">1</div>

        <li class="Decide_Rank_Item_Li">Test B</li>
        <div class="DisplayOrder">2</div>

        <li class="Decide_Rank_Item_Li">Test C</li>
        <div class="DisplayOrder">3</div>

        <li class="Decide_Rank_Item_Li">Test D</li>
        <div class="DisplayOrder">4</div>
</ul>

Изображение перед сортировкой:

Изображение не видно

Теперь, если я начну немного двигаться, вы увидите, что div, содержащий серийный номер, по-прежнему не отображается в нужном месте

Изображение не видно

После сортировки 2-го элемента на 3-й 

<ul id="ulSortable" class="ui-sortable" >
        <li class="Decide_Rank_Item_Li">test A</li>
        <div class="DisplayOrder">1</div>
       <div class="DisplayOrder">2</div>

        <li class="Decide_Rank_Item_Li">Test C</li>

        <li class="Decide_Rank_Item_Li">Test B</li>
        <div class="DisplayOrder">3</div>

        <li class="Decide_Rank_Item_Li">Test D</li>
        <div class="DisplayOrder">4</div>
</ul>

Изображение после сортировки:

Изображение не видно

Здесь показан стиль Ли и Див Стиль: 

.Decide_Rank_Item_Li
{
        position: relative;
       display: block;
        border-color: #C0C0C0;
        border-width: 1px;
        border-style: solid;
        vertical-align:  bottom;
        width: 110px;
        height: 100px;
        float:left;
        background-color: #F8F8F8;

}

.DisplayOrder
{
        position: relative;
        display: block;
        float: left;
        top: 5px;
        left: -105px;
        z-index: 100;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        padding: 0px;
        margin: 0px;
        width: 0px;
        clear: right;
        color: #808080; 
}

Ответы [ 3 ]

2 голосов
/ 12 мая 2009

Мне пришлось изменить HTML и CSS, но я думаю, что это дает эффект, который вы получили после.

Вот пример демонстрации: http://jsbin.com/erigu (редактируется через http://jsbin.com/erigu/edit)

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

    <style type="text/css" media="screen">
      * { margin: 0; padding: 0; }

      #numbers>div, #sortables>div {
        width: 110px;
        height: 100px;
        float: left;
        border: 1px solid #C0C0C0;
      }

      #numbers>div {
        padding-bottom: 20px;
        font: bold 12px Arial, Helvetica, sans-serif;
        color: #808080; 
        background-color: #F8F8F8;
      }

      #sortables>div {
        padding-top: 20px;
        text-align: center;
        color: black;
      }

      #sortables {
        position: absolute;
        left: 0px;
      }
    </style>
  </head>
  <body>
    <div id="numbers">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>

    <div id="sortables">
      <div>Test A</div>
      <div>Test B</div>
      <div>Test C</div>
      <div>Test D</div>
    </div> 

    <script>
      $(function(){
        $('#sortables').sortable({
          /*
            The helper option allows you to customize the dragged element.
            in this case we are adding a background.
          */  
          helper: function(evt, el){
            return el.clone().css({background:'#F8F8F8'});
          }
        });
      });
    </script>  
  </body>
</html>
2 голосов
/ 12 мая 2009

Просто подумал о альтернативном решении, которое будет немного более элегантным: 

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

    <style type="text/css" media="screen">
      body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
      li {
        width: 100px;
        height: 100px;
        float: left;
        background: #F8F8F8;
        border: 1px solid #C0C0C0;
        list-style-position: inside;
        color: #C0C0C0;
      }
      div {
        text-align: center;
        color: #C0C0C0;
        font-size: 120%;
      }
      .placeholder {
        list-style-type:decimal;
      }
    </style>
  </head>
  <body>
    <ol>
      <li><div>Test Content A</div></li>
      <li><div>Test Content B</div></li>
      <li><div>Test Content C</div></li>
      <li><div>Test Content D</div></li>
      <li><div>Test Content E</div></li>
      <li><div>Test Content F</div></li>
      <li><div>Test Content G</div></li>
      <li><div>Test Content H</div></li>
      <li><div>Test Content I</div></li>
      <li><div>Test Content J</div></li>
      <li><div>Test Content K</div></li>
      <li><div>Test Content L</div></li>
      <li><div>Test Content M</div></li>
      <li><div>Test Content N</div></li>
      <li><div>Test Content O</div></li>
      <li><div>Test Content P</div></li>
      <li><div>Test Content Q</div></li>
      <li><div>Test Content R</div></li>
      <li><div>Test Content S</div></li>
      <li><div>Test Content T</div></li>
      <li><div>Test Content U</div></li>
      <li><div>Test Content V</div></li>
      <li><div>Test Content W</div></li>
      <li><div>Test Content X</div></li>
      <li><div>Test Content Y</div></li>
      <li><div>Test Content Z</div></li>
    </ol>
    <script>
      $(function(){
        $('ol').sortable({
          helper: function(evt, el){
            return el.clone().css('color', '#F8F8F8');
          },
          placeholder: 'placeholder'
        });
      });
    </script>
  </body>
</html>
0 голосов
/ 12 мая 2009

Самым простым может быть помещение пар li / div внутрь другого элемента и сортировка по ним.

Нечто подобное должно работать, хотя есть много вариантов того, как вы хотите это сделать. Функция сортировки не требует использования li элементов. 

<ul id="ulSortable" class="ui-sortable" >
    <li class="Decide_Rank_Item_Li">
        <span>test A</span>
        <div class="DisplayOrder">1</div>
    </li>
    <li class="Decide_Rank_Item_Li">
        <span>test B</span>
        <div class="DisplayOrder">2</div>
    </li>
    <li class="Decide_Rank_Item_Li">
        <span>test C</span>
        <div class="DisplayOrder">3</div>
    </li>
    <li class="Decide_Rank_Item_Li">
        <span>test D</span>
        <div class="DisplayOrder">4</div>
    </li>
</ul>
...