输入文本在div中显示为double

时间：2016-05-18 17:02:39

标签： javascript jquery css drag-and-drop draggable

有人可以帮帮我吗？我已经尝试了好几天，但这一切都没有正常工作我的问题是，当我尝试输入一些文本时，如果你需要进一步的解释，请在每个div中显示双一。尝试输入一些东西，你会看到我在谈论什么，当我编辑它们时，其中一个改变颜色和另一个大小和字体的原因是因为类不同每个div都有不同的类目的 这是网站http://amp.site88.net/ 

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('.item1').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('.item1').find('.text').text($(editingText).val()).show();
    }
});

ko.bindingHandlers.draggable={
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).draggable();
    }
};



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('.item2').find('.edit_text1').val($(this).text()).show();
});

$(document).on("click", ".edit_text1", function()
{
    return false;
});


$(document).on("click", function()
{
    var editingText = $('.edit_text1:visible');
    if (editingText.length)
    {
        editingText.hide();
        editingText.closest('.item2').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.textContent1 = ko.observable('');
  self.textContent2 = ko.observable('');
  self.textContent3 = ko.observable('');
  self.init = function() {
    self.items([]);
  }
  self.remove = function(item) {
    console.log(item);
    self.items.remove(item);
 }
 self.addNew = function() {
  var content = [ 
    self.textContent1(), 
    self.textContent2(), 
    self.textContent3()
  ].filter(function(item) {
    return item !== ''
  });
  content.forEach(function(item) { self.items.push(item); })
  self.textContent1('');
  self.textContent2('');
  self.textContent3('');
  }
}

ko.applyBindings(new vm());

$("#fs").change(function() {
    //alert($(this).val());
    $('.item1').css("font-family", $(this).val());

});

$("#size").change(function() {
    $('.item1').css("font-size", $(this).val() + "px");
});


$('.foo').click(function(){
    $('.item2').css("color", $(this).attr('data-color'));
});

<style>.item{
    width: 200px;
    height: 200px;
    padding: 0.5em;
    background:transparent;
    z-index: 1;
    display:block;
}

.edit_text
{
    display: none;
}
.edit_text1
{
    display: none;
}
.fix_backround
{
    background-color: transparent;
}

.container {
    width: 500px;
    height: 500px;
    border: 2px solid;
    position: relative;
    overflow: auto;
}
</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>

<style>.foo {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}
.white {
  background: #FFFFFF;
}
.yellow {
  background: #FAFF38;
}
.orange {
  background: #FFA200;
}

.red {
  background: #FF0000;
}
.dorange {
  background: #FF5500;
}
.lgreen {
  background: #80FF00;
}

.green {
  background: #45C731;
}

.turk {
  background: #17DDBC;
}
.lblue {
  background: #00A2FF;
}.blue {
  background: #1713F6;
}.purple {
  background: #AB09D3;
}.black {
  background: #000000;
}

</style><style>   #mainTarget{
    width:30px; 
    height:20px; 
    position:relative;
    top:100px; 
    left:25%
}

.mainTarget{position:absolute; width:25px; height:25px;}

#target{
    position:absolute;
    height:25px;
    width:25px;
    background:url(http://files.softicons.com/download/system-icons/human-o2-icons-by-oliver-scholtz/png/128x128/actions/object-rotate-left.png) no-repeat top center #ffffff;
    background-size:100%;
    cursor:pointer; 
    z-index:1; 
    top:1; 
    right:1;    
}
</style>

<form method="post" action="<?php echo $PHP_SELF;?>">


<div id="colour" >
  <div class="foo white" data-color="#FFFFFF"></div>
  <div class="foo black" data-color="#000000"></div>
  <div class="foo yellow" data-color="#FAFF38"></div>
  <div class="foo orange" data-color="#FFA200"></div>
  <div class="foo red" data-color="#FF0000"></div>
  <div class="foo dorange" data-color="#FF5500"></div>
  <div class="foo lgreen" data-color="#80FF00"></div>
  <div class="foo green" data-color="#45C731"></div>
  <div class="foo turk" data-color="#17DDBC"></div>
  <div class="foo lblue" data-color="#00A2ff"></div>
  <div class="foo blue" data-color="#1713F6"></div>
  <div class="foo purple" data-color="#AB09D3"></div>
</div>
    <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>

    </select>

    <select id="size">
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>


    </select>





 </form>
 <div class="item1">
  <textarea  data-bind="value: textContent1" Placeholder="Type text to append"></textarea>
</div>

<div class="item2">
  <textarea data-bind="value: textContent2" Placeholder="Type text to append"></textarea>
</div>

<button data-bind="click: addNew">Generate New Div</button>

<div class="container">
  <div data-bind="foreach:items" class="fix_backround">

    <div href="#" class="item1" 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 href="#" class="item2" 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_text1"/>
      </center>
    </div>

  </div> 
</div><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">

2 个答案:

答案 0 :(得分：2)

这是一次只能给你一个的代码。独立工作的事情还没有排序，但我认为值得投票！

＆＃13;
＆＃13; 
var z = 1; //value to make div overlappable
var i = 0;
$('#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);
      }
    }
  });
  i++;
});

$(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.textContent1 = ko.observable('');
  self.textContent2 = ko.observable('');
  self.textContent3 = ko.observable('');
  self.init = function() {
    self.items([]);
  }
  self.remove = function(item) {
    console.log(item);
    self.items.remove(item);
  }
  self.addNew = function() {
    var content = [
      self.textContent1(),
      self.textContent2(),
      self.textContent3()
    ].filter(function(item) {
      return item !== ''
    });
    content.forEach(function(item) {
      self.items.push(item);
    })
    self.textContent1('');
    self.textContent2('');
    self.textContent3('');
  }
}

ko.applyBindings(new vm());

$("#fs").change(function() {
  //alert($(this).val());
  $('.item').css("font-family", $(this).val());

});

$("#size").change(function() {
  $('.item').css("font-size", $(this).val() + "px");
});


$('.foo').click(function() {
  $('.item').css("color", $(this).attr('data-color'));
});
＆＃13; 
<style> .item,
.item1 {
  width: 200px;
  height: 50px;
  float: left;
  padding: 0.5em;
  background: transparent;
  z-index: 1;
}

textarea {
  float: left;
  display: block;
  margin-top: 20px;
  margin-bottom: 30px;
  margin-right: 80%;
}

.edit_text {
  display: none;
}

.edit_text1 {
  display: none;
}

.fix_backround {
  background-color: transparent;
}

.container {
  width: 500px;
  height: 500px;
  border: 2px solid;
  position: relative;
  overflow: auto;
}

</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> <style>.foo {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.white {
  background: #FFFFFF;
}

.yellow {
  background: #FAFF38;
}

.orange {
  background: #FFA200;
}

.red {
  background: #FF0000;
}

.dorange {
  background: #FF5500;
}

.lgreen {
  background: #80FF00;
}

.green {
  background: #45C731;
}

.turk {
  background: #17DDBC;
}

.lblue {
  background: #00A2FF;
}

.blue {
  background: #1713F6;
}

.purple {
  background: #AB09D3;
}

.black {
  background: #000000;
}

</style><style> #mainTarget {
  width: 30px;
  height: 20px;
  position: relative;
  top: 100px;
  left: 25%
}

.mainTarget {
  position: absolute;
  width: 25px;
  height: 25px;
}

#target {
  position: absolute;
  height: 25px;
  width: 25px;
  background: url(http://files.softicons.com/download/system-icons/human-o2-icons-by-oliver-scholtz/png/128x128/actions/object-rotate-left.png) no-repeat top center #ffffff;
  background-size: 100%;
  cursor: pointer;
  z-index: 1;
  top: 1;
  right: 1;
}

</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;?>">

  <div id="colour">
    <div class="foo white" data-color="#FFFFFF"></div>
    <div class="foo black" data-color="#000000"></div>
    <div class="foo yellow" data-color="#FAFF38"></div>
    <div class="foo orange" data-color="#FFA200"></div>
    <div class="foo red" data-color="#FF0000"></div>
    <div class="foo dorange" data-color="#FF5500"></div>
    <div class="foo lgreen" data-color="#80FF00"></div>
    <div class="foo green" data-color="#45C731"></div>
    <div class="foo turk" data-color="#17DDBC"></div>
    <div class="foo lblue" data-color="#00A2ff"></div>
    <div class="foo blue" data-color="#1713F6"></div>
    <div class="foo purple" data-color="#AB09D3"></div>
  </div>
  <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>

  </select>

  <select id="size">
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>


  </select>

</form>
<div class="item">
  <textarea data-bind="value:textContent1" Placeholder="Type text to append"></textarea>
</div>

<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 i" data-bind="text:$data"></span>
        <input class="edit_text" />
      </center>
    </div>

  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您有相同的处理程序来添加两次定义的文本。删除其中一个。

$('#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);
            }
        }
    });
});
相关问题
最新问题