JQuery .append() Separate Elements

이미지와 텍스트 상자를 캔버스에 추가하는 스크립트를 만들었습니다. 텍스트 상자가 이미지 위에 나타나려면 CSS를 이미지에 적용해야합니다. 그러므로 나는 이미지들을 <img>, 텍스트를 <text>으로 구분했다.JQuery .append() Separate Elements

이렇게하면 두 가지 문제가 발생합니다. 이미지와 텍스트를 추가 할 때 두 요소는 분리 된 것으로 간주되며 동시에 두 요소가 아닌 이미지 나 텍스트 만 드래그 할 수 있습니다. 또한, 다른 이미지와 다른 텍스트 상자를 추가 할 때 두 이미지가 서로 위에 나타나지 않고 텍스트가 이미지 옆에 이미지와 텍스트 옆에 생성됩니다.

제 질문은 이것입니다. 이 두 요소를 하나의 요소로 통합하는 것이 가능하며, 생성 될 때마다 그렇게 할 수 있습니까?

여기 내 자바 스크립트입니다.

$(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 해요)되지 않을 경우, 나는 당신의 도움을 최첨단 링크를 attactched here.

감사했습니다 '!

출처

2012-02-26 TrustedDeveloper

''은 (는) 잘못된 HTML이며 어쨌든별로 의미가 없습니다. – ThiefMaster

고마워요! 이미지로 문제를 해결했습니다. – TrustedDeveloper

이미지 및 텍스트 요소 주위에 래퍼 <div>을 만들어보세요. 예 : <div id="#wrapper">. 난 당신이 퍼팅 한 인물로 구현과 몇 가지 문제가있다

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' />"); 
}

출처

2012-02-26 21:46:00

, 나는 기본적인 문서 문제를 무시하는 것 :

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

귀하의 addEvent 코드는 같을 것이다 : 그럼 당신은 다음과 같은 작업을 수행 할 수 함께 간단한 예제 :)

새로운 '메모'를 추가하면 개별적으로 움직일 수 없으므로 이동 가능한 컨테이너이기 때문에 더 많은 콘텐츠를 코르크 보드 컨테이너에만 추가 할 때 스택됩니다. 텍스트 영역/이미지, 다른 텍스트 영역/이미지.

나는 페이스트 빈 here에 대한 해결책을 세웠다. 한 번 봐봐도 되겠지. 바라건대 올바른 방향으로 당신을 안내해 줄 것이다.

사실, 난 정말했습니다 '코르크 항목'에 배경 이미지로 '노트'이미지를 넣어해야 그것에 대해 생각 후손

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

출처

2012-02-26 22:44:12 nbsp

JQuery .append() Separate Elements

답변

관련 문제