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排序不能输出更新排序列表的顺序

回答

相关问题