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

【问题标题】：Jquery insert list element with sortable positionJquery插入具有可排序位置的列表元素
【发布时间】：2015-10-08 13:59:14
【问题描述】：

如何使用 jquery 来实现，以便单击两个列表中的任何一个中的项目会将所选项目移动到另一个列表中。

当将项目移动到另一个列表时，新的排序应该首先基于项目编号（数据值），然后是左边的项目，然后是右边的项目。

例如，如果您要单击“左侧项目 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 jquery html jquery-ui jquery-ui-sortable

【解决方案1】：

这是一个好的开始......

您可以找到如何制作监听器事件和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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：