javascript – 在jQuery UI Sortable之后获取ID数组

前端之家收集整理的这篇文章主要介绍了javascript – 在jQuery UI Sortable之后获取ID数组前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用jQuery UI可拖放和可排序的功能,我是新的.
我有左边的项目列表(从数据库生成),我有右边的框,用户可以拖放它们.
当/之后,用户可以对它们进行排序.

这是完整的预览:http://jsbin.com/oBeXiko/3

问题:在排序后如何获取每个框中的元素ID数组?

我试过.sortable(“toArray”)和sortable(“serialize”),但都返回空字符串.

简单的HTML

<div id="raspored">  
      <div class="left">
        <ul id="kanta">Delete</ul>    
        <ul id="lista_predMeta" class="droptrue">
          <li class="predmet ui-state-default" predmet-id="id_1">Item_1</li>
          <li class="predmet ui-state-default" predmet-id="id_2">Item_2</li>
          <li class="predmet ui-state-default" predmet-id="id_3">Item_3</li>
          <li class="predmet ui-state-default" predmet-id="id_4">Item_4</li>
        </ul>
      </div>
      <div class="right">     
        <ul class="raspored" razred="1">I</ul>  
        <ul class="raspored" razred="2">II</ul>  
        <ul class="raspored" razred="3">III</ul>  
        <ul class="raspored" razred="4">IV</ul>  
      </div>  
  </div>

我的jQuery功能

$(document).ready(function() {
     var url = "";
     var raz = 0;

    $( ".raspored" ).sortable({
        cursor: 'move',opacity: 0.65,stop: function ( event,ui){
            var data = $(this).sortable('toArray');
            console.log(data); // This should print array of IDs,but returns empty string/array
       }
    });

    $(".raspored").droppable({
         accept: ".predmet",drop: function(event,ui){
            ui.draggable.removeClass("predmet");
            ui.draggable.addClass("cas");
            raz = $(this).attr("razred");
         }
    });


    $(".predmet").draggable({
        connectToSortable:".raspored",helper: "clone",revert: "invalid",stop: function(event,ui){
                var predmet = $(this).attr("predmet-id") ;
                console.log( "PredmetID = " + predmet + " | RazredID = " + raz);
        }
    });

    $("#kanta").droppable({
        accept: ".cas",ui){
            ui.draggable.remove();
        }
    });

    $( ".raspored,.predmet,.cas,#kanta,#lista_predMeta" ).disableSelection();
  });

解决方法

当您调用toArray时,您可以传递一个包含属性字段的选项对象.该属性字段定义了toArray调用中使用的属性.例如:
var data = $(this).sortable('toArray',{ attribute: 'predmet-id' });

这将为您提供项目的predmet-id属性的数组.参见toArray documentation.

请注意,默认属性是id,这就是为什么你的数组返回空字符串之前 – 你的元素没有id属性

原文链接:/jquery/153620.html

猜你在找的jQuery相关文章