Knockout拖放：在拖动时输入隐藏div并在拖动上显示div [我的不同]

Question

我是淘汰JavaScript的新手。在我的项目中，我正在使用Knockout拖放功能。最初我有两个部门，一个是可见的，另一个有财产显示无。当我做拖动输入功能时，我需要隐藏第一个分区并显示第二个分区。一旦拖动离开隐藏第2师并显示第一师。但问题是，当我被拖动进入第二师的功能正在改变我不想隐藏第二师直到下降。请帮我解决。

我不想更改＆＃34; .typeTextareaSection＆＃34;（在代码中有）块中的任何html。

这是我的小提琴Knockout Drag and drop Fiiddle

＆＃13;

＆＃13;

function ViewModel(){
    var self = this;
    this.dropZones = ko.observableArray([{
        'elements' : ko.observableArray([])  // just to see that the output is correct
    }]);

   
    this.dragoverTextarea = function(e){
        console.log('dragOver');
        e.stopPropagation();
        e.preventDefault();
    }

    this.dropTextarea = function(e, data){
        console.log('drop');
        e.stopPropagation();
        e.preventDefault();
        var files = e.dataTransfer.files;
        for (var i = 0, f; f = files[i]; i++) {
            data.elements.push(f.name);
        }
        $('.typeTextarea').children('.typeTextareaSection').css('display', 'block');
			$('.typeTextarea').children('#dragtimeTextarea').css('display', 'none');

    }

    this.dragenterTextarea = function(e, index){
        console.log('dragEnter');
              $('.typeTextarea').eq(index).children('.typeTextareaSection').css('display', 'none');
			$('.typeTextarea').children('#dragtimeTextarea').css('display', 'block');
    }

    this.dragleaveTextarea = function(e, index){
        console.log('end');        
        $('.typeTextarea').children('.typeTextareaSection').css('display', 'block');
			$('.typeTextarea').children('#dragtimeTextarea').css('display', 'none');
    }
}

ko.applyBindings(new ViewModel());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>

<div class="col-md-12" data-bind="foreach: dropZones">
    <div class="typeTextarea" style="margin-top: 20px; height: 120px; border: 2px dashed #bbb; padding: 10px;" data-bind="event: {
        dragover: function (data, e) { $root.dragoverTextarea(e); },
        drop: function (data, e) { $root.dropTextarea(e, $data); },
        dragenter: function (data, e) { $root.dragenterTextarea(e, $index()); },
        dragleave: function (data, e) { $root.dragleaveTextarea(e, $index()); }
    }">
		<div class="typeTextareaSection">
			<div class="headerForTypeArea">
				
	            <img style="text-align: right; float: right; cursor: pointer;" src="Content/images/cancel27.png" alt="Cancel" title="Cancel" />
				<img style="text-align: right; float: right; cursor: pointer;padding-right:5px;" src="Content/images/correctBox2.png" alt="Save" title="Save" />
				<div style="clear: both;"></div>
			</div>

			<div class="ContentEditableSection">
                <textarea  class="ediitableTestAreaPlaceHolders" maxlength="25000" style="margin-bottom: 0px; height: 70px; width: 99%;" placeholder="drop files here..." ></textarea>

			</div>
		</div>

		<textarea id="dragtimeTextarea" placeholder="Over this area to check my problem" style="display:none;font-size:20px;color:#000;"></textarea>

	</div>
</div>

＆＃13;

＆＃13;

＆＃13;