views:

152

answers:

3

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"&gt;&lt;/script&gt;
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"&gt;&lt;/script&gt;

    <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  A: 

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

opacity: '.5',
Mike
+3  A: 

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!

John Bledsoe
+3  A: 

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