Seçili olan ve kaldır

Tek bir öğeye tıklandığında (#add_text) başka bir öğenin (#template) içine içerik (#text_frame) ekleyen ve bu öğenin (#text_frame) sürüklenebileceği bir kod var. Seçili olan ve kaldır

$('#add_text').mousedown 
    (
    function() 
    {        
    $('#add_text').css('background-color', 'blue'), 
    $('#template').prepend('<div id="text_frame"></div>'), 
    $('#text_frame').draggable('enable'), 
    $('#text_frame').draggable ({containment:'#safe_area',distance:1}); 
    } 
);

nasıl bir katma elemanı tıklayarak o sınır farklı bir renk ve kaldırıldığında bir öğe ekleyerek, örneğin metni kaldırmak için diğer düğmeye basarak oldu gibi çarpıyordu bunu?

Güncelleme:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> 

<meta http-equiv="content-type" content="text/html; charset=windows-1251" /> 


    <title>Add/Delete</title> 

<style type="text/css"> 

div#template 
{ 
    position: relative; outline: 1px #B7C4CE solid; 
     width: 556px; height: 320px; margin-left: auto; margin-right: auto; 
} 

div#text_frame 
    { 
     position:absolute; outline:1px silver solid; background-color:#F7F9FC; width: 96px; 
     height:24px; margin-top: 34px; margin-left: 32px; cursor: pointer;     
    } 

div#add_text,div#delete_text 
    {  
    position: relative; 
     outline:1px silver solid; background-color:red; width: 99px; height: 20px; 
     margin-top: 15px; margin-left: auto; margin-right: auto;  
    } 
</style> 

    <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
    <script type="text/javascript" src="jquery-ui-1.7.3.custom.min.js"></script> 

    <script type="text/javascript"> 

$(document).ready(function(){ 

    /* ------------------- add_text --------------------*/ 

    $('#add_text').hover 
     (
      function() {$('#add_text').css('outline', '1px blue solid');}, 
      function() {$('#add_text').css('outline', '1px silver solid');}      
     ); 

    $('#add_text').mousedown 
     (
      function() 
      {        
       $('#add_text').css('background-color', 'blue'), 
    $('#template').prepend('<div id="text_frame"></div>'), 
       $('#text_frame').draggable('enable'), 
    $('#text_frame').draggable({containment: '#safe_area', distance: 1});  
      }   
     ); 

    $('#add_text').mouseup 
     (
      function() 
      {        
       $('#add_text').css('background-color', 'red'); 
      }   
     ); 

    /* ------------------- select_delete_text --------------------*/ 

    $('#delete_text').hover 
     (
      function() {$('#delete_text').css('outline', '1px blue solid');}, 
      function() {$('#delete_text').css('outline', '1px silver solid');}      
     ); 

    $('#delete_text').mousedown 
     (
      function() 
      {        
       $('#delete_text').css('background-color', 'blue') 
      }   
     ); 

    $('#delete_text').mouseup 
     (
      function() 
      {        
       $('#delete_text').css('background-color', 'red'); 
      }   
     );  

    $('#text_frame').click // dont work ??? 
     (
      function() 
      {        
       $('#text_frame').css('outline', '1px black solid'); 
      }   
     );   
}); 

</script> 

</head> 

<body> 

    <div id="template"></div> 

     <div id="add_text" class="font_button">add elements</div>   
     <div id="delete_text" class="font_button">delete elements</div> 

<br /><br />1) Press the button several times "add elements"<br /> 
2) drag items<br /><br /> 

how to make:<br /><br /> 
1) Select Item<br /> 
2) change of style (outline color for example) element when it is selected<br /> 
3) Remove the chosen item by pressing the button "delete elements"<br /> 

</body> 
</html>

jQuery UI ile jQuery kullanıyorum: Bu bir SSCCE lezzet tam koddur.

kaynak

2010-11-20 gena

I (Ben gerçekten ne soran anlamıyorum gibi) Sorunuzun çözümü bilmiyorum ama hızlı ipucu Yığın taşması yayınlarken: Sorularınızı etiketlemek için deneyin uygun şekilde. JQuery ve JavaScript etiketlerini ekledim. Sahip olduğunuz, 'kaldır' ve 'seçili' olanlarınız, gerçekten kimseye sorunun ne olduğunu anlatma. Ayrıca, jQuery UI ile birlikte jQuery framework ile JavaScript kullandığınızı bildirmek de yardımcı olacaktır. – pinkfloydx33

Dene:

var newNode = $('<div></div>').attr('id','text_frame').css('border','1px solid red'); 
$('#template').prepend(newNode);

kaynak

2010-11-20 17:07:04 Kos

Seçili olan ve kaldır

cevap

İlgili konular