Droppable div, созданный на лету, не работает - PullRequest
Новая
       15

Droppable div, созданный на лету, не работает

3 голосов
/ 16 августа 2011

Я использую класс для установки перетаскиваемых и сбрасываемых свойств элемента (UL, LI или DIV).Так что я могу перетаскивать, как задумано, когда я создаю элементы во время разработки.Но когда я создаю элемент «на лету» (div с id = 'ontheflyDiv') не работает как dropable.

Заранее спасибо. 

<html xmlns="">
<head>
    <title></title>
    <link rel="stylesheet" href="/Styles/themes/base/jquery.ui.all.css">
    <script src="/Scripts/jquery-1.6.2.js"></script>
    <script src="/Scripts/ui/jquery.ui.core.js"></script>
    <script src="/Scripts/ui/jquery.ui.widget.js"></script>
    <script src="/Scripts/ui/jquery.ui.accordion.js"></script>
    <script src="/Scripts/ui/jquery.ui.mouse.js" type="text/javascript"></script>
    <script src="/Scripts/ui/jquery.ui.draggable.js" type="text/javascript"></script>
    <script src="/Scripts/ui/jquery.ui.droppable.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/Styles/demos.css">
    <script>

        $(function () {

        //Draggable Items
            $(".myDragClass").draggable({
                helper: 'clone',
                appendTo: 'body'
            });
        //Droppable
            $(".myDropClass").droppable(
                {
                    drop: function (event, ui) {
                        //remove old item
                        $(this).find(".myDragClassPlaceHolder").remove();

                        var listHtml = "<li class='myDragClass' style='width: 200px;color:#000000;background-color:#00FF00;'>" +
                                        "<div id='ontheflyDiv' class='myDropClass' style='width:200px;height:100px;'>" +                                        
                                        "New Droppable area" + ui.draggable.text() + "</div></li>";

                        $(this).append(listHtml);
                    }
                });

       });
    </script>
</head>
<body>
    <div id="div3" class="demos-nav">
        <ul class="myDropClass">
            <li id="li7" class="myDragClassPlaceHolder">Drag and drop order here</li>
        </ul>
    </div>
    <BR />
    <div id="Div1" style="float: none; clear: both; font-size: 12px; height: 100px; overflow: scroll;">
        <table>
            <tr>
                <td><B><U>Order No</B></U></td>
            </tr>
            <tr>
                <td>
                    <div class="myDragClass">5000162255</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="myDragClass">
                        5000162266</div>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

1 Ответ

4 голосов
/ 16 августа 2011

Я думаю, что вам нужно, чтобы ваш добавленный элемент сбрасывался с помощью вызова droppable () для него после того, как вы добавили его в DOM.если вы добавите что-то вроде этого: 

    $(this).find('#ontheflyDiv').droppable( { ... });

внизу вашей функции перетаскивания, это должно работать.Мне неизвестен способ добавления сбрасываемой функциональности к элементам, добавляемым после загрузки страницы, аналогично тому, что функция jquery live () может делать для click и других событий.

...