Sortable clone helper not working

问题

Maybe I don't understand how clone works with sortable, but here is what I would like to do.

When sorting an item I would like a clone of the item I am dragging remain until I stop drop the item in its new position.

Here's the code:

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>

    <style type="text/css">
        .sort { width: 150px; }
        .ui-state-highlight { background-color: #000; height:2px; }
    </style>
</head>
<body>
    <div>
        <ul class="sort">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </div>

    <script type="text/javascript">
        $(function() {
            $('.sort').sortable({
                helper: 'clone',
                placeholder: 'ui-state-highlight',
                opacity: '.5'
            })
        })
    </script>
</body>
</html>

Thanks in advance for the help!

回答1:

When you use the clone option, the original item is hidden with style="display: none" when you start dragging. You could attach a handler to the sort event (or whatever event hides the original item) to re-show it. Everything should work for you then.

P.S. I used Firebug to look at what was happening to the original element. If you're not using it you really ought to be!

回答2:

Its just one way to hack it. You can lead from here on. Change your config as below.

        $('.sort').sortable({
            helper: 'clone',
            placeholder: 'ui-state-highlight',
            opacity: '.5',
            start: function(event, ui) {
              $('.sort').find('li:hidden').show();
            }
        })

回答3:

I have two lists, sortable1 and sortable2. I want to clone items from sortable1 to sortable2 and vice versa.

One improvement have to be to check if it is top element, if it is. prev() will not work. So check if there is a prev, if not use after().

My solution was this:

$("#sortable1").sortable({
        helper:"clone",
        connectWith: "#sortable2",
        start:function(event,ui){
            $(ui.item).show();
            clone = $(ui.item).clone();
            before = $(ui.item).prev();
        },
        stop:function(event, ui){
            before.after(clone);
        }
    }).disableSelection();
$("#sortable2").sortable({
        helper:"clone",
        connectWith: "#sortable1",
        start: function(event, ui){
            $(ui.item).show();
            clone = $(ui.item).clone();
            before = $(ui.item).prev();
        },
        stop:function(event, ui){
            before.after(clone);
        }
    }).disableSelection();

回答4:

While it might not fix the issue you're having. There is an extra comma at the end of your parameters.

opacity: '.5',

回答5:

Few words about improvements that John Bledsoe said. For cloning first elements in #sortable1 I use such a code:

    stop:function(event, ui){
        if (before.length) before.after(clone);
        else $(this).prepend(clone);
    },

来源：https://stackoverflow.com/questions/3024766/sortable-clone-helper-not-working

标签

javascript

jquery

jquery-ui

jquery-ui-sortable