Sortable clone helper not working

javascript jquery jquery-ui jquery-ui-sortable

18,787

Solution 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!

Solution 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();
            }
        })

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

Solution 4

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

Solution 5

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

opacity: '.5',

View more solutions

18,787

Jeremy Seekamp

Updated on April 24, 2022

Comments

Jeremy Seekamp about 2 years

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!