0

を使用して、ポートレットの位置/順序を取得でき$(this).sortable("serialize");ます。ポートレットをある列から別の列に配置すると、それらの 2 つの列のポートレットの更新された順序が表示されます。これは列 2 からの更新された順序でwidget[]=xyzあり、列 3 の場合は次のとおりです。widget[]=pqr&widget[]=hij

それで、私の質問は、返された 2 つの配列リストがどの列のものであるかを知るにはどうすればよいですか? col3: widget[]=pqr&widget[]=hij やなど、各列のキーと値のペアを返すことはできますcol2 : widget[]=xyzか?

私の現在のコードは次のとおりです:-

$( ".column" ).sortable({
      connectWith: ".column",
      handle: ".portlet-header",
      update : function(event, ui) {
        var postData = $(this).sortable("serialize");
        console.log(postData);
      }
    });

HTML

<div class="column" id="col1">

  <div class="portlet" id="widget_abc">
    <div class="portlet-header">Feeds</div>
    <div class="portlet-content" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit

    </div>
  </div>

  <div class="portlet" id="widget_def">
    <div class="portlet-header">News</div>
    <div class="portlet-content" >Lorem ipsum dolor sit amet</div>
  </div>

</div>

<div class="column" id="col2">

  <div class="portlet" id="widget_hij">
    <div class="portlet-header">Shopping</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer</div>
  </div>

</div>

<div class="column" id="col3">

  <div class="portlet"  id="widget_xyz">
    <div class="portlet-header">Links</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>

  <div class="portlet"  id="widget_pqr">
    <div class="portlet-header">Images</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>

</div>
4

1 に答える 1

2

prevEvent 変数は、同じイベントを 2 回処理しないようにするためにあります。いいアイデアが思いつきませんでした...

var prevEvent = null;

$( ".column" ).sortable({
      connectWith: ".column",
      handle: ".portlet-header",
      update : function(event, ui) {

          //Have I alredy handled this event?
          if(event.timeStamp == prevEvent){
              return null;
          }

          prevEvent = event.timeStamp;

          $(".column").each(function(){
              console.log($(this).attr('id')+':'+$(this).sortable("serialize"));
          });
      }
});

結果：

col1:widget[]=def&widget[]=abc 
col2:widget[]=hij 
col3:widget[]=xyz&widget[]=pqr
于 2013-09-09T18:24:26.233 に答える