Jquery 插入具有可排序位置的列表元素

Jquery insert list element with sortable position

如何使用 jquery 使点击两个列表中任一列表中的项目将所选项目移动到另一个列表中。

将项目移动到另一个列表时，新的排序应首先根据项目编号（数据值）进行数字排序，然后是左侧项目，然后是右侧项目。

例如，如果您要单击 "left item 2"，则该项目应从左侧列表中删除，然后右侧列表应显示右侧项目 1、左侧项目 2、右侧项目 2、右侧项目3、右项4、右项5

<!DOCTYPE html>
<html>
    <body>
        <div class="container">
           <div class="row">
               <div class="col-sm-4 col-sm-offset-1 col-xs-6">
                   <div class="well">
                       <ul class="my-list my-list-left">
                           <li data-value="1">Left Item 1</li>
                           <li data-value="2">Left Item 2</li>
                           <li data-value="3">Left Item 3</li>
                           <li data-value="4">Left Item 4</li>
                           <li data-value="5">Left Item 5</li>
                       </ul>
                   </div>
               </div>
               <div class="col-sm-4 col-sm-offset-1 col-xs-6">
                   <div class="well">
                      <ul class="my-list my-list-right">
                           <li data-value="1">Right Item 1</li>
                           <li data-value="2">Right Item 2</li>
                           <li data-value="3">Right Item 3</li>
                           <li data-value="4">Right Item 4</li>
                           <li data-value="5">Right Item 5</li>
                      </ul> 
                   </div>
               </div>
           </div> 
        </div>
    </body>
</html>

我会做这样的事情，尽管我会花更多时间清理它。

您需要将点击的元素从源列表移动到目标列表，然后根据属性对目标列表进行排序。

下面的 Javascript 是双向的。

var moveToListAndSort = function(source, target, attribute) {
    attribute = attribute || 'data-value';  

    // Whenever a list item is clicked in the source list
    $(source).on('click', 'li', function() {
        // Remove the clicked list item from its current list
        $(this).remove();

        // Append it to the target list
        $(target).append($(this));

        // Sort the target list based on an attribute
        $(target).children('li').detach().sort(function(a, b) {
            var valueA = a.getAttribute(attribute);
            var valueB = b.getAttribute(attribute);

            var sortA = a.getAttribute('data-sort');
            var sortB = b.getAttribute('data-sort');

            // Compare the value attributes of the two list items
            if (valueA > valueB) {
                return 1;
            }

            if (valueA < valueB) {
                return -1;
            }

            // The value attributes are the same, so compare the
            // sort attributes
            if (sortA > sortB) {
                return 1;
            }

            if (sortA < sortB) {
                return -1;  
            }

            return 0;
        }).appendTo(target);
    });
};

moveToListAndSort('.my-list-left', '.my-list-right');
moveToListAndSort('.my-list-right', '.my-list-left');

我必须向每个列表项添加第二个属性 data-sort 以确定在 值之后 对什么进行排序，这是硬编码的。

该函数可选择接受第三个参数，attribute，以防您想按不同的属性执行初始排序。

理想情况下，排序将被提取到它自己的函数中，以便它可以独立运行。

var moveToListAndSort = function(source, target, attribute) {
    attribute = attribute || 'data-value';  
    
    $(source).on('click', 'li', function() {
        $(this).remove();

        $(target).append($(this));

        $(target).children('li').detach().sort(function(a, b) {
            var valueA = a.getAttribute(attribute);
            var valueB = b.getAttribute(attribute);

            var sortA = a.getAttribute('data-sort');
            var sortB = b.getAttribute('data-sort');
          
            if (valueA > valueB) {
                return 1;
            }

            if (valueA < valueB) {
                return -1;
            }

            if (sortA > sortB) {
                return 1;
            }
            
            if (sortA < sortB) {
                return -1;  
            }
          
            return 0;
        }).appendTo(target);
    });
};

moveToListAndSort('.my-list-left', '.my-list-right');
moveToListAndSort('.my-list-right', '.my-list-left');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
            <a style="float: right; margin-top: 30px;" href="index.html">&laquo; Back to the interview question list</a>
            </h1>
            <h4>jQuery DOM manipulation and event handling.</h4>
            <p>Open up <code>test1.html</code>, and add in some Javascript code to make it so that clicking items from either of the two lists will move the selected item into the other list.</p>
            <p>When moving items to the other list, the new ordering should be first numerically based on the items number (<code>data-value</code>), and then the left item followed by the right item.</p>
            <p>For example, if you were to click "left item 2", that item should be removed from the left list, and the right list should then show <code>Right item 1, Left Item 2, Right Item 2, Right Item 3, Right item 4, Right item 5</code></p>
            
            <hr />
            
           <div class="row">
               <div class="col-sm-4 col-sm-offset-1 col-xs-6">
                   <div class="well">
                       <ul class="my-list my-list-left">
                           <li data-value="1" data-sort="1">Left Item 1</li>
                           <li data-value="2" data-sort="1">Left Item 2</li>
                           <li data-value="3" data-sort="1">Left Item 3</li>
                           <li data-value="4" data-sort="1">Left Item 4</li>
                           <li data-value="5" data-sort="1">Left Item 5</li>
                       </ul>
                   </div>
               </div>
               <div class="col-sm-4 col-sm-offset-1 col-xs-6">
                   <div class="well">
                      <ul class="my-list my-list-right">
                           <li data-value="1" data-sort="2">Right Item 1</li>
                           <li data-value="2" data-sort="2">Right Item 2</li>
                           <li data-value="3" data-sort="2">Right Item 3</li>
                           <li data-value="4" data-sort="2">Right Item 4</li>
                           <li data-value="5" data-sort="2">Right Item 5</li>
                      </ul> 
                   </div>
               </div>
           </div> 
        </div>

这是一个好的开始...

您可以找到如何创建侦听器事件和 jQuery 选择器。

您还可以添加一个逻辑来操作 html 元素并对它们进行排序。

$('ul.my-list-left ').on('click','li',function () {
     var  total =  $('ul.my-list-right li').length;
     if(total ===0){
         $('ul.my-list-right').append($('ul.my-list-left li').eq($(this).index())) 
     }else{
         var data_value = parseInt($(this).attr('data-value'));
         
         var position = total<data_value?total-1:data_value-1;
         $('ul.my-list-right li').eq(position).after($('ul.my-list-left li').eq( $(this).index())) 
     }
 });

 $('ul.my-list-right ').on('click','li',function () {
     var  total =  $('ul.my-list-left li').length;
     if(total ===0){
         $('ul.my-list-left').append($('ul.my-list-right li').eq($(this).index())) 
     }else{
         var data_value = parseInt($(this).attr('data-value'));
         
         var position = total<data_value?total-1:data_value-1;
         $('ul.my-list-left li').eq(position).after($('ul.my-list-right li').eq( $(this).index())) 
     }
 });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <body>
        <div class="container">
           <div class="row">
               <div class="col-sm-4 col-sm-offset-1 col-xs-6">
                   <div class="well">
                       <ul class="my-list my-list-left">
                           <li data-value="1">Left Item 1</li>
                           <li data-value="2">Left Item 2</li>
                           <li data-value="3">Left Item 3</li>
                           <li data-value="4">Left Item 4</li>
                           <li data-value="5">Left Item 5</li>
                       </ul>
                   </div>
               </div>
               <div class="col-sm-4 col-sm-offset-1 col-xs-6">
                   <div class="well">
                      <ul class="my-list my-list-right">
                           <li data-value="1">Right Item 1</li>
                           <li data-value="2">Right Item 2</li>
                           <li data-value="3">Right Item 3</li>
                           <li data-value="4">Right Item 4</li>
                           <li data-value="5">Right Item 5</li>
                      </ul> 
                   </div>
               </div>
           </div> 
        </div>
    </body>
</html>