Question

我想分别编辑文字我该怎么办？我想一次点击一个并编辑我点击的那个请帮助我希望以后尽可能简单，我想编辑更多的东西，但现在这样就可以了

＆＃13;

var z = 1; //value to make div overlappable

$('#addText').click(function (e) {
    /** Make div draggable **/
    $('<div />', {
        class: 'ui-widget-content',
        appendTo: '.container',
        draggable: {
            containment: 'parent',
            start: function( event, ui ) {
                $(this).css('z-index', ++z);
            }
        }
    });
});


$(document).on("dblclick", '.text', function()
{
    $(this).hide();    $(this).closest('.item').find('.edit_text').val($(this).text()).show();
});

$(document).on("click", ".edit_text", function()
{
    return false;
});


$(document).on("click", function()
{
    var editingText = $('.edit_text:visible');
    if (editingText.length)
    {
        editingText.hide();
        editingText.closest('.item').find('.text').text($(editingText).val()).show();
    }
});

ko.bindingHandlers.draggable={
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).draggable();
    }
};

var vm=function(){
    var self=this;
    self.items=ko.observableArray();
    self.textContent = ko.observable('');
    self.init=function(){
        self.items([]);
    }
    self.remove=function(item){
        console.log(item);
        self.items.remove(item);
    }
    self.addNew = function() {
      self.items.push( self.textContent() );
      self.textContent('');
    }
    self.init();
}

ko.applyBindings(new vm());

$("#fs").change(function() {
    //alert($(this).val());
    $('.item').css("font-family", $(this).val());

});

＆＃13;

<style>.item{
    width: 200px;
    height: 200px;
    padding: 0.5em;
    background:transparent;
    z-index: 1;
    display:block;
}

.edit_text
{
    display: none;
}

.fix_backround
{
    background-color: transparent;
}

.container {
    width: 500px;
    height: 500px;
    border: 2px solid;
}
</style><style>
.thumbs img{
  margin:3px;
  width:50px;
  float:left;
}</style>
<style>
.bottlesWrapper img{
  margin:3px;
  width:400px;
  float:left;
}</style>
<style>#main { border:1px solid #eee; margin:20px; width:410px; height:220px;}
</style>
<style type="text/css" media="screen">
    .transparent { background:transparent }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script  
 src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script><link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet"
 href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<link rel="stylesheet" href="/resources/demos/style.css">

＆＃13;

<form method="post" action="<?php echo $PHP_SELF;?>">
 
   

    <select id="fs"> 
        <option value="Agency FB">Agency FB</option>
        <option value="Algerian">Algerian</option>
        <option value="AR Berkley">AR Berkley</option>
        <option value="AR Blanca">AR Blanca</option>
        <option value="AR Bonnie">AR Bonnie</option>
        <option value="AR Carter">AR Carter</option>
        <option value="AR Cena">AR Cena</option>
        <option value="AR Christy">AR Christy</option>
        <option value="AR Darling">AR Darling</option>
        <option value="AR Decode">AR Decode</option>
        <option value="AR Delaney">AR Delaney</option>
        <option value="AR Destine">AR Destine</option>
        <option value="AR Essence">AR Essence</option>
        <option value="AR HERMANN">AR Hermann</option>
        <option value="AR JULIAN">AR Julian</option>
        <option value="Arial">Arial</option>
        <option value="Arial Black">Arial Black</option>
        <option value="Arial Narrow">Arial Narrow</option>
        <option value="Arial Rounded MT Bold">Arial Rounded MT Bold</option>
        <option value="Baskerville Old Face">Baskerville Old Face</option>
        <option value="Bell MT">Bell MT</option>
        <option value="Berlin Sans FB">Berlin Sans FB</option>
        <option value="Berlin Sans FB Demi">Berlin Sans FB Demi</option>
        <option value="Bernard MT Condensed">Bernard MT Condensed</option>
        <option value="Blackadder ITC">Blackadder ITC</option>
        <option value="Bodoni MT">Bodoni MT</option>
        <option value="Bodoni MT Black">Bodoni MT Black</option>
        <option value="Bodoni MT Condensed">Bodoni MT Condensed</option>
        <option value="Bodoni MT Poster Compressed">Bodoni MT Poster Compressed</option>
        <option value="Book Antiqua">Book Antiqua</option>
        <option value="Bookman Old Style">Bookman Old Style</option>
        <option value="Bradley Hand ITC">Bradley Hand ITC</option>   
        <option value="Britannic Bold">Britannic Bold</option>
        <option value="Broadway">Broadway</option>
        <option value="Brush Script MT">Brush Script MT</option>
        <option value="Bodoni MT">Bodoni MT</option>
        <option value="Californian FB">Californian FB</option>
        <option value="Castellar">Castellar</option>
        <option value="Century Gothic">Century Gothic</option>
        <option value="Century Schoolbook">Century Schoolbook</option> 
        <option value="Chiller">Chiller</option>
        <option value="Colonna MT">Colonna MT</option> 
        <option value="Comic Sans MS">Comic Sans MS</option>
        <option value="Constantia">Constantia</option>
        <option value="Cooper Black">Cooper Black</option>
        <option value="Copperplate Gothic Bold">Copperplate Gothic Bold</option>
        <option value="Copperplate Gothic Light">Copperplate Gothic Light</option>
        <option value="Curlz MT">Curlz MT</option>
        <option value="Edwardian Script ITC">Edwardian Script ITC</option> 
       <option value="Elephant">Elephant</option>
       <option value="Engravers MT">Engravers MT</option>
       <option value="Eras Bold ITC">Eras Bold ITC</option>
       <option value="Eras Demi ITC">Eras Demi ITC</option>
       <option value="Eras Light ITC">Eras Light ITC</option>
       <option value="Eras Medium ITC">Eras Medium ITC</option>
       <option value="Felix Titling">Felix Titling</option>
       <option value="Footling MT Light">Footling MT Light</option>
       <option value="Forte">Forte</option>
    </select>
    
    <select id="size">
        <option value="8">8</option>
    


 
 </form>
<textarea data-bind="value: textContent" Placeholder="Type text to append"></textarea>
<button data-bind="click: addNew">Generate New Div</button>

<div class="container">
<div data-bind="foreach:items" class="fix_backround">
    <div href="#" class="item" data-bind="draggable:true,droppable:true">
        <span data-bind="click:$parent.remove">[x]</span><br/><br/>
        <center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center>
    </div>
</div>
</div>

＆＃13;

在同一个div中编辑两个单独的draggable

0 个答案: