2 Container löschen sich gegenseitig

Question

Ich würde gerne wissen, wie ich verhindern kann, dass zwei Container stornieren. Die Codes sind fast die gleichen, ich habe nur ein paar Dinge geändert, es ist nicht das, was ich zuerst, aber die zweite funktioniert nicht, wenn ich sie um die eine, die ich erste funktioniert, aber nicht die zweite geschaltet. Ich verwende toggle, um eins nach dem anderen anzuzeigen. Ich werde nur einen kleinen Teil meines Codes veröffentlichen.

JavaScript für den ersten Teil

<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 für zweite Teil

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

Toggle

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

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

HTML für Toggle

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

HTML für Container und Eingabetext (ersten)

<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 für Container und Eingabetext (zweiten)

<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

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

Answer 1

Sie fügen jQuery, Knockout und jQuery-UI jeweils zweimal ein. Das ist wahrscheinlich nicht das Problem, aber es ist nicht gut.

Sie verwenden jQuery, um zu steuern, welcher Block angezeigt wird, und das ist ein Knockout no-no. Es ist Knockouts Aufgabe, das DOM zu manipulieren. Werfen Sie einen Blick auf Knockout templates, oder die if binding für Möglichkeiten zur Kontrolle, welche Anzeigen.

Answer 2

Es sieht aus wie Sie einen Tippfehler haben in Dein Toggle js für die Seconddiv-Klasse. Sie vermissen ein 'n' in Ihrem jquery Anruf dafür: secoddiv. Wenn dieser Code direkt von der Quelle stammt, kann das Problem sein.