Question

我正在尝试创建一个列表，该列表在第一个列表项中应该是固定的，然后在第二个列表中，您应该能够拖放第一个项目列表，并且应该可以重新排列它们。

我找到了useful link，并创建了代码。我的问题是，当我从第一个列表拖放到第二个列表时，该项目将从第一个列表中删除。

因为我是Java语言的新手，所以我正在寻求您的帮助，如何禁用列表1中的消失项目，或如何重新生成它，如图所示。预先感谢。

我的HTML文件：

<!doctype html>
<head>
    <meta charset="utf-8">
    <title>HTML5 Sortable jQuery Plugin</title>
    <style>
        header, section {
            display: block;
        }
        body {
            font-family: 'Droid Serif';
        }
        h1, h2 {
            text-align: center;
            font-weight: normal;
        }
        #features {
            margin: auto;
            width: 460px;
            font-size: 0.9em;
        }
        .connected, .sortable, .exclude, .handles {
            margin: auto;
            padding: 0;
            width: 310px;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .sortable.grid {
            overflow: hidden;
        }
        .connected li, .sortable li, .exclude li, .handles li {
            list-style: none;
            border: 1px solid #CCC;
            background: #F6F6F6;
            font-family: "Tahoma";
            color: #1C94C4;
            margin: 5px;
            padding: 5px;
            height: 22px;
        }
        .handles span {
            cursor: move;
        }
        li.disabled {
            opacity: 0.5;
        }
        .sortable.grid li {
            line-height: 80px;
            float: left;
            width: 80px;
            height: 80px;
            text-align: center;
        }
        li.highlight {
            background: #FEE25F;
        }
        #connected {
            width: 440px;
            overflow: hidden;
            margin: auto;
        }
        .connected {
            float: left;
            width: 200px;
        }
        .connected.no2 {
            float: right;
        }
        li.sortable-placeholder {
            border: 1px dashed #CCC;
            background: none;
        }
    </style>
    <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
</head>

<body>
    <header>
        <h1>HTML5 Sortable jQuery Plugin</h1>
    </header>
    <section id="connected" >
        <h2>Connected Sortable Lists</h2>
        <ul class="connected list" >
            <li>Item 1</li>
            <li >Item 2</li>
            <li >Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li >Item 6</li>
        </ul>
        <ul class="connected list no2">
            <li class="highlight">Item 1</li>
            <li class="highlight">Item 2</li>
            <li class="highlight">Item 3</li>
            <li class="highlight">Item 4</li>
            <li class="highlight">Item 5</li>
            <li class="highlight">Item 6</li>
        </ul>
    </section>
    <a href="http://github.com/farhadi/html5sortable"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/edc6dae7a1079163caf7f17c60495bbb6d027c93/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub"></a>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="jquery.sortable.js"></script>
    <script>
        $(function() {
            $('.connected').sortable({
                connectWith: '.connected'
            });
        });
    </script>
</body>
</html>

JavaScript文件：

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

如何将项目从一个列表拖放到另一个列表而不将其从第一个列表中删除？

0 个答案: