Перетаскиваемые элементы jQuery теряют свою перетаскиваемость после замены (на примере jsfiddle) - PullRequest
Новая
       30

Перетаскиваемые элементы jQuery теряют свою перетаскиваемость после замены (на примере jsfiddle)

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

У меня есть два элемента li, которые можно перетаскивать в jQuery. Когда я перетаскиваю блок «один» поверх блока «два», они меняются местами. Все идет нормально. (Задержка устраняет еще одну проблему, описанную здесь .) Однако элементы теперь больше не перетаскиваются, даже после сброса их опции перетаскивания.

Есть идеи как это исправить? полный рабочий 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) {
                window.setTimeout("Swap()", 600);
                }
            });
        });

        function Swap() {
            $('#one').swapWith($('#two'));

            //trying to fix problem where elements can't be dragged anymore
            $("li").draggable("destroy"); 
            $("li").draggable(options);
        }
    </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>

1 Ответ

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

Итак, поиграв с вашим кодом, вот вывод, к которому я пришел.

Похоже, что перетаскиваемый метод jqueryui отслеживает свои объекты отдельно.Когда вы клонируете, это отслеживание не клонируется.Я изменил ваш код следующим образом: 

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

Вы можете увидеть захватывающие результаты http://jsfiddle.net/XkUDv/16/

Как вы можете видеть, если вы перетаскиваете новые клонированные объекты, он перемещает оригинал, а неклонированный.

Это не ответ, но я надеюсь, что это поможет.

ОБНОВЛЕНИЕ:

после более внимательного изучения клона я изменил javascript на: 

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

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

Теперь все работает так, как вы хотели:)

Я предполагаю, что проблема в том, что, поскольку clone (true) копирует обработчики событий, когда вы пытаетесь присоединить перетаскиваемый объект к новомуклонирует он видит старые обработчики событий и игнорирует элементы.Поэтому вместо clone (true) я изменил его на clone ();

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

Рабочая версия: http://jsfiddle.net/XkUDv/21/

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

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

...