Ausgewählt und entfernt

Ich habe einen Code, der beim Klicken auf ein einzelnes Element (#add_text) Inhalt (#text_frame) innerhalb eines anderen Elements (#template) hinzufügt und dieses Element (#text_frame) kann gezogen werden.Ausgewählt und entfernt

$('#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}); 
    } 
);

Wie zu tun, dass er auf einem zusätzlichen Element herausragte, wie seine Grenze war eine andere Farbe und durch Drücken der anderen Taste, indem Sie auf den Text beispielsweise zu entfernen, ein Element hinzugefügt wird entfernt?

aktualisieren: Dies ist der vollständige Code in Geschmack eines SSCCE:

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

ich jQuery mit jQuery UI verwenden.

Quelle

2010-11-20 gena

Ich weiß nicht, die Lösung auf Ihre Frage (wie ich nicht wirklich verstehen, was Sie fordern), sondern eine schnelle Spitze, wenn sie auf Stack-Überlauf Posting: versuchen, Ihre Fragen zu markieren, passend. Ich habe die Tags jQuery und JavaScript hinzugefügt. Diejenigen, die Sie hatten, "entfernen" und "ausgewählt", sagen niemandem wirklich, worum es in der Frage geht. Es wäre auch hilfreich, in Ihrem Beitrag anzugeben, dass Sie JavaScript mit dem jQuery-Framework zusammen mit jQuery UI verwenden. – pinkfloydx33

Versuchen:

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

Quelle

2010-11-20 17:07:04 Kos

Ausgewählt und entfernt

Antwort

Verwandte Themen