jQuery排序不能輸出更新排序列表的順序

我真的爲此不知所措，這應該是一個簡單的直接任務。jQuery排序不能輸出更新排序列表的順序

我使用以下代碼創建可排序列表。該列表工作並且可排序，但不會將訂單提醒給用戶。

<html> 
<!DOCTYPE html> 
<head> 
    <link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script> 
    <script type="text/javascript" href="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
    <script src='js/jquery.sortable.js'></script> 
    <script language="javascript" type="text/javascript"> 

     $(function() { 
      $("#projectItems").sortable({ 
       update: function (event, ui) { 

        var order = $(this).sortable('toArray').toString(); 
        alert(order); 
       } 
      }); 

     }); 

    </script> 
</head> 

<body> 

    <div id="projectItems"> 
     <div id="item1">(1)</div> 
     <div id="item2">(2)</div> 
     <div id="item3">(3)</div> 
     <div id="item4">(4)</div> 
     <div id="item5">(5)</div> 
    </div> 

</body> 

</html>

我在這個小提琴鏈接中使用相同的代碼，它似乎工作正常？ http://jsfiddle.net/FUXys/1/

在錯誤控制檯中也沒有發現錯誤。

爲什麼當它在小提琴中的作品完全一樣時，這不會提醒訂單？

任何意見或幫助將不勝感激。

更新

這裏是我的jquery.sortable.js代碼：

/** HTML5 Sortable jQuery Plugin 
* http://farhadi.ir/projects/html5sortable 
* 
* Copyright 2012, Ali Farhadi 
* Released under the MIT license. 
*/ 
(function($) { 
var dragging, placeholders = $(); 
$.fn.sortable = function(options) { 
    var method = String(options); 
    options = $.extend({ 
     connectWith: false 
    }, options); 
    return this.each(function() { 
     if (/^enable|disable|destroy$/.test(method)) { 
      var items = $(this).children($(this).data('items')).attr('draggable', method == 'enable'); 
     if (method == 'destroy') { 
      items.add(this).removeData('connectWith items') 
       .off('dragstart.h5s dragend.h5s selectstart.h5s dragover.h5s dragenter.h5s drop.h5s'); 
     } 
     return; 
    } 
    var isHandle, index, items = $(this).children(options.items); 
    var placeholder = $('<' + (/^ul|ol$/i.test(this.tagName) ? 'li' : 'div') + ' class="sortable-placeholder">'); 
    items.find(options.handle).mousedown(function() { 
     isHandle = true; 
    }).mouseup(function() { 
     isHandle = false; 
    }); 
    $(this).data('items', options.items) 
    placeholders = placeholders.add(placeholder); 
    if (options.connectWith) { 
     $(options.connectWith).add(this).data('connectWith', options.connectWith); 
    } 
    items.attr('draggable', 'true').on('dragstart.h5s', function(e) { 
     if (options.handle && !isHandle) { 
      return false; 
     } 
     isHandle = false; 
     var dt = e.originalEvent.dataTransfer; 
     dt.effectAllowed = 'move'; 
     dt.setData('Text', 'dummy'); 
     index = (dragging = $(this)).addClass('sortable-dragging').index(); 
    }).on('dragend.h5s', function() { 
     dragging.removeClass('sortable-dragging').show(); 
     placeholders.detach(); 
     if (index != dragging.index()) { 
      items.parent().trigger('sortupdate', {item: dragging}); 
     } 
     dragging = null; 
    }).not('a[href], img').on('selectstart.h5s', function() { 
     this.dragDrop && this.dragDrop(); 
     return false; 
    }).end().add([this, placeholder]).on('dragover.h5s dragenter.h5s drop.h5s', function(e) { 
     if (!items.is(dragging) && options.connectWith !== $(dragging).parent().data('connectWith')) { 
      return true; 
     } 
     if (e.type == 'drop') { 
      e.stopPropagation(); 
      placeholders.filter(':visible').after(dragging); 
      return false; 
     } 
     e.preventDefault(); 
     e.originalEvent.dataTransfer.dropEffect = 'move'; 
     if (items.is(this)) { 
      if (options.forcePlaceholderSize) { 
       placeholder.height(dragging.outerHeight()); 
      } 
      dragging.hide(); 
      $(this)[placeholder.index() < $(this).index() ? 'after' : 'before'](placeholder); 
      placeholders.not(placeholder).detach(); 
     } else if (!placeholders.is(this) && !$(this).children(options.items).length) { 
      placeholders.detach(); 
      $(this).append(placeholder); 
     } 
     return false; 
    }); 
}); 
}; 
})(jQuery);

來源

2013-02-28 Zanmato

使用stop(event, ui)，而不是update(event, ui)。

$("#projectItems").sortable({ 
    stop: function (event, ui) { 
     var order = $("#projectItems").sortable('toArray').toString(); 
     console.log(order); 
    } 
});

DEMO： http://jsfiddle.net/dirtyd77/FUXys/2/

側面說明：請務必使用console.log()而不是alert()。你會感謝我。

來源

2013-02-28 19:44:16 Dom

感謝您回覆我，我已經嘗試過您的建議沒有成功。我正在檢查Web控制檯的響應，是它應該響應的地方？任何進一步建議我如何能解決這個問題，將不勝感激，因爲它開始讓我瘋狂！ – Zanmato 2013-02-28 20:51:15

是的，檢查控制檯，它應該出現在那裏。如果沒有，讓我知道，我們會弄清楚發生了什麼。 – Dom 2013-02-28 21:02:09

也可以在'js/jquery.sortable.js'中提供代碼嗎？ – Dom 2013-02-28 21:06:52

你有機會使用這個插件嗎？ https://github.com/johnny/jquery-sortable

此插件不支持'更新'參數。相反，你必須這樣做

$("#projectItems").sortable({ 
    onDrop: function (item, container, _super) { 
     _super(item) 
     console.log(container.items) // already an array 
    } 
});

來源

2013-03-01 09:20:56

我不是100％確定，但我認爲這是我正在使用的插件。但是，我已經嘗試過上面的建議，它不會輸出任何內容到控制檯。是否有可以推薦的可排序插件版本？ – Zanmato 2013-03-01 10:34:40

我通過涼亭安裝了jquery-sortable，它使用你鏈接的這個版本。切換到onDrop適用於我。 – 2015-01-12 12:15:03

我解決了它，原來它是用jquery.sortable.js文件執行。我從http://jqueryui.com/download/下載了一個不同的版本，現在工作正常。

我現在可以輸出訂單作爲警報或console.log。

感謝Dom和P.Kelly指引我正確的方向。

來源

2013-03-01 10:53:23 Zanmato

jQuery排序不能輸出更新排序列表的順序

回答

相關問題