JQuery.append(）分离元素

JQuery .append() Separate Elements

本文关键字：分离 元素 append JQuery      更新时间：2023-09-26

我制作了一个脚本，它将图像和文本框添加到画布中。为了让文本框出现在图像上，我需要对图像应用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' />")
}

如果这不是足够的信息（对不起，我是n00btastic），我在这里附上了一个出血边缘的链接。

谢谢你的帮助！

尝试在图像和文本元素周围创建一个包装<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' />");  
}

您的实现有一些问题，我将忽略基本的文档问题，因为我认为您正在整理一个快速示例：）

当你附加一个新的"注释"时，它不能单独移动，而是容器可以移动，所以它们只是堆积在一起，因为你只是在向软木板容器添加更多内容，即：另一个文本区域/图像，然后是另一个文本区域/图像。

我在这里提出了一个关于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；

相关文章：