Question

我有一个代码，点击一个元素（#add_text）就可以在另一个元素（#template）中添加内容（#text_frame），并且可以拖动这个元素（#text_frame）。

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

如何通过点击他突出的添加元素来做到这一点，例如它的边框是不同的颜色，按下其他按钮删除文本，例如添加项目会被删除？

更新：这是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>

我在jQuery UI中使用jQuery。

Answer 1

尝试：

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

选中并删除

1 个答案: