2コンテナは互いにキャンセルします

2つのコンテナがどのように取り消されるのを防ぐことができますか？コードはほぼ同じです私はちょうど私が先に入れたものではないいくつかのものを変更しましたが、最初のものは入れましたが、2番目のものは入れませんでした。私は一度に1つずつ表示するためにトグルを使用しています。私はちょうど私のコードの小さな部分を投稿するつもりです。2コンテナは互いにキャンセルします

第二部のための最初の部分のためのJavaScript

<script> 
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(); 
} 
}); 


var count = 1; 
var selectedDraggable; 

ko.bindingHandlers.draggable={ 
init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
    $(element).draggable(); 
    $(element).addClass('item' + count); 
    count++; 
    $(element).on('click', function() { 
     selectedDraggable = $(this); 
    }) 
} 
}; 


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());

はJavaScript

var z = 1; //value to make div overlappable 

$('#addText').click(function (e) { 
/** Make div draggable **/ 
$('<div />', { 
    class: 'ui-widget-content', 
    appendTo: '.container4', 
    draggable: { 
     containment: 'parent', 
     start: function(event, ui) { 
      $(this).css('z-index', ++z); 
     } 
    } 
}); 
}); 


$(document).on("dblclick", '.text1', function() 
{ 
$(this).hide(); $(this).closest('.item1').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('.item1').find('.text1').text($(editingText).val()).show(); 
} 
}); 


var count = 1; 
var selectedDraggable; 

ko.bindingHandlers.draggable={ 
init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
    $(element).draggable(); 
    $(element).addClass('item1' + count); 
    count++; 
    $(element).on('click', function() { 
     selectedDraggable = $(this); 
    }) 
} 
}; 


var vm=function(){ 
var self=this; 
self.items1=ko.observableArray(); 
self.textContent1 = ko.observable(''); 
self.init=function(){ 
    self.items1([]); 
} 
self.remove=function(item){ 
    console.log(item); 
    self.items1.remove(item); 
} 
self.addNew1 = function() { 
    self.items1.push(self.textContent1()); 
    self.textContent1(''); 
} 
self.init(); 
} 

ko.applyBindings(new vm());

HTML

$("#show_first").click(function(){ 
$(".firstdiv").toggle(); 
$(".seconddiv").hide(); 
}); 

$("#show_second").click(function(){ 
$(".secoddiv").toggle(); 
$(".firstdiv").hide(); 
});

トグルトグル

<button type="button" id="show_first">Display Front</button> 
<button type="button" id="show_second">Display Back</button>

用コンテナと入力したテキストのための

HTML（最初の）

<div class="firstdiv"><center>Front</center> 
<div class="container1" style=" float: left;" > 
<p align="center"><textarea data-bind="value: textContent" Placeholder="Type text to append" rows="4" cols="21"></textarea>&nbsp;&nbsp;&nbsp; 
    <button type="button" data-bind="click: addNew">Create</button></p> 
<div id="box" class="container" style="float:left;"> 

<div data-bind="foreach:items" class="fix_backround"> 
<div class="item" data-bind="draggable:true,droppable:true"> 

    <center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center></div></div></div></div></div>

コンテナと入力テキストのためのHTML（秒）

<div class="seconddiv"><center>second</center> 
<div class="container3" style=" float: left;" > 
<p align="center"><textarea data-bind="value: textContent1" Placeholder="Type text to append" rows="4" cols="21"></textarea>&nbsp;&nbsp;&nbsp; 
    <button type="button" data-bind="click: addNew1">Create</button></p></div> 

<div id="box1" class="container4" style="float:left;"> 

    <div data-bind="foreach:items1" class="fix_backround1"> 
    <div class="item1" data-bind="draggable:true,droppable:true"> 

    <center><span class="text1" data-bind="text:$data"></span><input class="edit_text1"/></center></div></div></div></div></div>

スクリプト

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-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> 

<script src="http://circletype.labwire.ca/js/circletype.js"></script><script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>

出典

2016-08-03 user6483684