JQuery Создание нескольких перетаскиваемых объектов - PullRequest
Новая
       0

JQuery Создание нескольких перетаскиваемых объектов

0 голосов
/ 09 февраля 2011

Это сложная проблема для меня. Вот что я хочу:

Я создал div, который можно перетаскивать, и 1 экземпляр уже находится на странице, готовой для перетаскивания. Когда пользователь перетаскивает его, я хочу динамически создать его новый экземпляр. Я также должен иметь возможность удалить его одним нажатием кнопки, чтобы они все были доступны.

Можете ли вы указать мне правильный путь для этого?

Вот что у меня есть: 

$(document).ready(function() {

            $('#dragThis').resizable({
                stop: function(event, ui) {
                    var w = $(this).width();
                    var h = $(this).height();
                    var tr = $('#contentDiv');
                    tr.each(function() {
                        //alert( fields[$(this).index()] )
                        $(this).height(h - 45);
                    });


                    console.log('StopEvent fired')
                    console.log('Width:' + w);
                    console.log('Height:' + h)
                }
            }).draggable(
            {
                containment: $('body'),
                drag: function() {
                    var offset = $(this).offset();
                    var offsetImage = $("#<%=dropHere.ClientID %>").offset();
                    var xPos = offset.left;
                    var yPos = offset.top;

                    $('#posX').text('x: ' + xPos);
                    $('#posY').text('y: ' + yPos);

                },
                stop: function() {
                    var finalOffset = $(this).offset();
                    var finalxPos = finalOffset.left;
                    var finalyPos = finalOffset.top;

                    $('#finalX').text('Final X: ' + finalxPos);
                    $('#finalY').text('Final X: ' + finalyPos);
                }
            });

и вот мой HTML: 

<div class="dragThis" id="dragThis">
                    <div class="content" id="contentDiv">
                        <p>
                            <asp:Label ID="lblContent" Width="2px" runat="server" Text="Label"></asp:Label>
                        </p>
                    </div>
                    <div class="pointer">
                        <div class="one">
                        </div>
                        <div class="two">
                        </div>
                    </div>
                </div>

В настоящее время я могу изменить размер, перетащить и получить местоположение 1 дел. Мне нужно, чтобы это работало для нескольких div.

Пожалуйста, помните, что мне нужен доступ к этим элементам (позиции и тексты внутри них - установка и получение)

Любая помощь приветствуется.

Спасибо

1 Ответ

0 голосов
/ 13 декабря 2011

Оберните ваш код в вызываемую функцию.Затем, когда вы создаете новый div, вы должны использовать методы "destroy" для уничтожения текущих экземпляров resizable + draggable (

$('#dragThis').resizable('destroy').draggable('destroy');

), а затем запустить функцию для повторной инициализации resizable + draggable;

...