JQuery .append () отдельные элементы - PullRequest
Новая
       5

JQuery .append () отдельные элементы

0 голосов
/ 27 февраля 2012

Я создал скрипт, который добавляет изображение и текстовое поле на холст. Чтобы текстовое поле появилось над изображением, мне нужно применить CSS к изображению. Поэтому я сделал для разделения div, <img> для изображения и <text> для текста.

Это создает две проблемы. Когда я сначала добавляю изображение и текст, два элемента считаются отдельными, и я могу перетаскивать только изображение или текст, а не два элемента одновременно. Кроме того, когда я добавляю другое изображение и другое текстовое поле, они не появляются друг над другом, скорее текст появляется рядом с текстовым полем, а изображение рядом с изображением.

Так что мой вопрос таков. Возможно ли объединить эти два элемента в один, и если они порождены, заставить их делать это каждый раз одинаково?

Вот мой Javascript, который я сделал для него. 

$(document).ready(function() {
$("#img").draggable();
$("#text").draggable();
});

function addEvent() {
$("#img").append("<img src='Sticky_Note.png'</a>")
$("#text").append(" <textarea name='comments' x-webkit-speech='x-webkit-speech'style='width:380px;height:300px; background: none; border:none; font-size:24px; color:#0033FF;font-family:comic sans ms' />")

}

Если этой информации недостаточно (я извиняюсь, извините), я обнаружил здесь ссылку на передний край .

Спасибо за вашу помощь!

Ответы [ 2 ]

0 голосов
/ 27 февраля 2012

есть несколько проблем с вашей реализацией, я проигнорирую основные проблемы с документами, так как я полагаю, что вы собрали быстрый пример:)

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

Я предложил решениена pastebin здесь , не стесняйтесь взглянуть, надеюсь, это поможет направить вас в правильном направлении.

На самом деле, я тоже встраиваю его, для потомков 

<!DOCTYPE html>
<html>
<head>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

    <style>
        #corkboard { position: relative; }
        #corkboard textarea { position: absolute; width: 380px; height: 300px; top: 100px; left: 60px; background: none; border: none; font-size: 24px; color: #03f; font-family: 'comic sans ms', serif; }
        #corkboard img { position: absolute; }

        .corkboard-item {
            position: absolute;
            float: left;
            width: 500px;
            height: 500px;
        }
    </style>

    <script>
        $( document ).ready( function() {
            // Create our corkboard item
            //
            $corkboard_item = $( '<div></div>' );
            $corkboard_item
                .addClass( 'corkboard-item' )
                .append( '<img src="http://www.bookofsam.com/corkboard/Sticky_Note.png" />' )
                .append( '<textarea name="comments" x-webkit-speech="x-webkit-speech">Enter your note</textarea>' );

            // Counter goodness
            $x = 1;


            // Make sure the one we click is always at the top
            //
            $( 'img, textarea' ).live( 'click', function( e ) {
                e.preventDefault();

                $( '.corkboard-item' ).each( function() {
                    $( this ).css({ 'z-index':1 });
                });

                $( this )
                    .parent()
                    .css({
                        'z-index':2
                    })
            });


            // Add one when we click the button
            //
            $( 'a.add-item' ).live( 'click', function( e ) {
                e.preventDefault();

                var item = $corkboard_item.clone();
                $( item )
                    .find( 'textarea' )
                    .attr({
                        'name' : ( 'comment-' + $x )
                    });

                $x++;

                $("#corkboard").append( $( item ).draggable() );
            });
        });
    </script>
</head>
<body>
    <p>CORKBOARD TEST - 0.8.555 </p>

    <a href="#" class="add-item"><img src='http://www.bookofsam.com/corkboard/Note_Scale.png' align="right" /></a>

    <div id="corkboard"></div>
</html>

Подумав об этом, я действительно должен был поместить изображение "заметки" в качестве фонового изображения на "пробковой доске".

:)

nbsp;

0 голосов
/ 27 февраля 2012

Попробуйте создать оболочку <div> вокруг вашего изображения и текстовых элементов, например, <div id="#wrapper">. Тогда вы можете сделать следующее: 

$('#wrapper').draggable();

Ваш код addEvent будет выглядеть так: 

function addEvent() {
    $("#wrapper").append("<img src='Sticky_Note.png'</a>");
    $("#wrapper").append(" <textarea name='comments' x-webkit-speech='x-webkit-speech'style='width:380px;height:300px; background: none; border:none; font-size:24px; color:#0033FF;font-family:comic sans ms' />");  
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...