Question

我真的不知道为什么这不起作用，这应该是一个简单的直接任务。

我有以下代码用于创建可排序列表。该列表有效且可排序，但不会向用户发出提示。

<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);

Answer 1

您是否有机会使用此插件？ https://github.com/johnny/jquery-sortable

此插件不支持“更新”参数。相反，你必须做类似的事情

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

Answer 2

使用stop( event, ui )代替update( event, ui )。

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

样本： http://jsfiddle.net/dirtyd77/FUXys/2/

附注：请务必使用console.log()代替alert()。你会感谢我的。

Answer 3

我解决了它，结果发现它与jquery.sortable.js文件有关。我从http://jqueryui.com/download/下载了一个不同的版本，现在工作正常。

我现在可以输出订单作为警报或console.log。

感谢Dom和P.Kelly指出我正确的方向。

jQuery Sortable在更新时不输出可排序列表的顺序

3 个答案: