Сортируемый клон помощник не работает - PullRequest
Новая
       3

Сортируемый клон помощник не работает

13 голосов
/ 11 июня 2010

Может быть, я не понимаю, как клон работает с сортируемым, но вот что я хотел бы сделать.

При сортировке предмета я хотел бы, чтобы клон предмета, который я перетаскивал, оставался до тех пор, пока я не перестал бросать предмет в новом положении.

Вот код: 

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

Заранее спасибо за помощь!

Ответы [ 5 ]

13 голосов
/ 11 июня 2010

Когда вы используете опцию клонирования, исходный элемент скрывается с style="display: none", когда вы начинаете перетаскивать.Вы можете прикрепить обработчик к событию сортировки (или любому другому событию, скрывающему исходный элемент), чтобы повторно показать его.Тогда все должно работать для вас.

PS Я использовал Firebug , чтобы посмотреть, что происходит с оригинальным элементом.Если вы не используете его, вы действительно должны быть!

13 голосов
/ 11 июня 2010

Это всего лишь один из способов взломать его.Вы можете вести отсюда.Измените конфигурацию, как показано ниже. 

        $('.sort').sortable({
            helper: 'clone',
            placeholder: 'ui-state-highlight',
            opacity: '.5',
            start: function(event, ui) {
              $('.sort').find('li:hidden').show();
            }
        })
4 голосов
/ 21 июня 2011

У меня есть два списка: sortable1 и sortable2. Я хочу клонировать элементы из sortable1 в sortable2 и наоборот.

Одно улучшение должно заключаться в проверке, является ли это верхним элементом, если это так. prev () не будет работать. Так что проверьте, есть ли предыдущий, если не использовать после ().

Мое решение было таким: 

$("#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();
1 голос
/ 31 октября 2017

Несколько слов об улучшениях, которые сказал Джон Бледсо. Для клонирования первых элементов в # sortable1 я использую такой код: 

    stop:function(event, ui){
        if (before.length) before.after(clone);
        else $(this).prepend(clone);
    },
1 голос
/ 11 июня 2010

Хотя это может не решить вашу проблему.В конце ваших параметров есть дополнительная запятая. 

opacity: '.5',
...