Замена двух перетаскиваемых элементов списка jQuery не работает должным образом (с примером jsFiddle) - PullRequest
Новая
       22

Замена двух перетаскиваемых элементов списка jQuery не работает должным образом (с примером jsFiddle)

3 голосов
/ 03 января 2011

В приведенном ниже минималистском рабочем примере два блока меняются местами, когда блок «один» перетаскивается на блок «два». Проблема заключается в том, что когда поле «one» отбрасывается, его стиль имеет значения «top» и «left», в результате чего его помещают вдали от места, куда он должен упасть. Его класс включает в себя 'ui-draggable-dragging'. Кажется, что верхнее и левое значения связаны с количеством элементов, которые были перетащены перед удалением. И перетаскивание было «прервано», следовательно, остаточный класс «ui-draggable-dragging»?

Чего мне не хватает, чтобы своп работал без проблем? полный пример jsfiddle здесь 

<html>
<head>

    <script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script>

    <script type="text/javascript" src="includes/jquery-ui-1.8.2.custom.min.js"></script>

    <script type="text/javascript">

        jQuery.fn.swapWith = function(to) {
            return this.each(function() {
                var copy_to = $(to).clone(true);
                var copy_from = $(this).clone(true);
                $(to).replaceWith(copy_from);
                $(this).replaceWith(copy_to);
            });
        };

        $(document).ready(function() {

        options = {revert: true};

        $("li").draggable(options)
        $('#wrapper').droppable({
            drop: function(event, ui) {
            $(ui.draggable).swapWith($('#two'));
            }
        });
        });
    </script>

</head>
<body>
    <form>
    <ul id="wrapper">
        <li id='one'>
            <div style="width: 100px; height: 100px; border: 1px solid green">
                one<br /></div>
        </li>
        <li id='two'>
            <div style="width: 110px; height: 110px; border: 1px solid red">
                two<br /></div>
        </li>
    </ul>
    <br />
    </form>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 04 января 2011

В продолжение вашего другого поста я добавил опцию helper: 'clone', а затем велел сценарию удалить все элементы с классом .ui-draggable-dragging 

    <script type="text/javascript">

    jQuery.fn.swapWith = function(to) {
        return this.each(function() {
            var copy_to = $(to).clone();
            var copy_from = $(this).clone();
            $(to).replaceWith(copy_from);
            $(this).replaceWith(copy_to);
        });
    };



    $(document).ready(function() {

        options = { 
                revert: true,
                helper: 'clone'
        };

        $("li").draggable(options);
        $('#wrapper').droppable({
            drop: function(event, ui) {
    //      window.setTimeout(function(){
                $('#one').swapWith($('#two'));
                $(".ui-draggable-dragging").remove();
                $("li").draggable(options);
    //}, 1);
            }
        });
    });

</script>

рабочий пример: http://jsfiddle.net/XkUDv/26/

Надеюсь, это поможет!

PS: я раньше не использовал jsfiddle, так что спасибо за ваше участие в том, чтобы показать мне, что:)

0 голосов
/ 04 января 2011

Это мой обходной путь .

Я полагаю, что, не глядя и не понимая, как работает внутреннее перетаскивание и перетаскивание в jQuery, есть некоторое прошедшее время, прежде чем все в перетаскивании завершит обработку.

Поэтому я решил, что обмен не должен начинаться, пока все не будет сделано. Поскольку я не знаю, когда это произойдет, у меня произошел обмен после некоторой задержки. Я использовал setTimeout в событии drop. Я должен был использовать не менее 600 мс, чтобы быть уверенным, что «все было ясно и безопасно». Менее чем через 600 мсек у «верхних» и «левых» еще были некоторые значения, что означало, что процесс еще не завершен. Чем дольше задержка, тем меньше эти значения; пока что-нибудь большее не имеет верх и не оставляет равных нулей. По методу проб и ошибок 600 мс, кажется, делают это.

Если у кого-то есть «более чистое» решение, я был бы признателен. Плюс «научное» объяснение полезно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...