在排序後從列表中獲取可排序的Jquery-ui數據

我在獲取排序後的數據表id="#playlist_save"時遇到問題。在排序後從列表中獲取可排序的Jquery-ui數據

id ="#playlist_save"從一個空的<ol></ol>列表開始。

然後用戶可以對項目進行排序，他們需要的形式：

<ol class="simple_with_animation vertical"> 
    $videos 
</ol>

到列表：

<div class="group"> 
    <ol id="playlist_save" class="simple_with_animation vertical"> 
    </ol> 
</div>

但是，當我要保存的數據已經排序之後，我沒有得到任何數據來自

console.log(postdata);

請幫我一把！ :(

爲了更好的理解，請訪問：http://music-hot40.com/Playlist.php

PHP

$ii = 1; 
foreach ($searchResponse['items'] as $searchResult) { 
    switch ($searchResult['id']['kind']) { 
     case 'youtube#video': 
      $videos .= sprintf('<li id="listItem_%u"><img alt="youtube_image" src="http://img.youtube.com/vi/%s/hqdefault.jpg" style="height: 120px; width: 120px;"></img><font color="#953e31">%s</font> %s</li>', $ii, $searchResult['id']['videoId'], $searchResult['snippet']['title'], $searchResult['id']['videoId']); 
      $ii++; 
      break; 
    } 
} 
$htmlBody .= <<<END 
<div class="group"> 
    <ol class="simple_with_animation vertical"> 
     $videos 
    </ol> 
</div>

END;

下一組

<div class="group"> 
    <ol id="playlist_save" class="simple_with_animation vertical"> 
    </ol> 
</div>

的Javascript

var adjustment; 
$(document).ready(function() { 
    $("ol.simple_with_animation").sortable({ 
     group: 'group', 
     pullPlaceholder: false, 
     // animation on drop 
     onDrop: function ($item, container, _super) { 
      var $clonedItem = $('<li/>').css({height: 0}); 
      $item.before($clonedItem); 
      $clonedItem.animate({'height': $item.height()}); 

      $item.animate($clonedItem.position(), function() { 
       $clonedItem.detach(); 
       _super($item, container); 
      }); 
     }, 
     // set $item relative to cursor position 
     onDragStart: function ($item, container, _super) { 
      var offset = $item.offset(), 
        pointer = container.rootGroup.pointer; 

      adjustment = { 
       left: pointer.left - offset.left, 
       top: pointer.top - offset.top 
      }; 

      _super($item, container); 
     }, 
     onDrag: function ($item, position) { 
      $item.css({ 
       left: position.left - adjustment.left, 
       top: position.top - adjustment.top 
      }); 
     } 
    }); 
});

點

保存從#playlist_save到數據庫中的數據（沒有）和日誌數據中的console.log

$(function() { 
      // log data 
      $("#playlist_save").sortable({ 
       update: function (event, ui) { 
        var postdata = $(this).sortable('serialize'); 
        console.log(postdata); 
       } 
      }); 
     });

來源

2015-08-29 Bas van der Ploeg

你有兩個jquery插件的名稱sortable，而這所定義的最新的一個沒有update 。此文件：

<script src="js/jquery-sortable.js"></script>

調用sortable插件，它有很多功能，但不能更新。當你運行$（...）。sortable（）時，你在調用這個插件，所以更新不會被觸發，因爲它在標準jquery-ui sortable中。

如果你想保持一個列表上的該custom sortable的功能，但使用另一update，你應該爲你的插件兩個不同的名字，所以沒有混亂。像這樣的例子：

在這個文件中的js/jQuery的sortable.js最後一行改爲：

}(jQuery, window, 'customSortable');

然後在你的JavaScript，這樣稱呼它：

$("ol.simple_with_animation").customSortable({

來源

2015-08-30 16:05:48

在排序後從列表中獲取可排序的Jquery-ui數據

回答

相關問題