https://stackoverflow.com/questions/46810675/knockout-element-becomes-undraggable-html5-drag-and-drop

by jlspake

HTML

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

<ul data-bind="
        dropzone: { name: 'unassigned', drop: $root.DropUnassignedStandard }">

        <!-- ko foreach: DupeStandards -->
            <li data-bind="text: Name, 
                dragzone: { name: 'assigned', dragStart: $root.onStart, dragEnd: $root.onEnd }" draggable="true" />
        <!-- /ko -->
    </ul>
    
<div style="min-height:100px; border: 1px solid blue;" 
    data-bind="dropzone: { name: 'assigned', drop: $root.DropAssignedStandard }">
    <ul>
        <!-- ko foreach: UnassignedDupeStandards -->             
        <li data-bind="text: Name, 
            dragzone: { name: 'unassigned', dragStart: $root.onStart, dragEnd: $root.onEnd }" draggable="true" />     
         <!-- /ko -->
    </ul>
</div>

CSS

ul {
  border: 1px solid blue;
}

li:hover{
  background-color: orange;
}

JavaScript

function viewModel(){
		var self = this;
		self.DupeStandards = ko.observableArray([{Name: 'test item 1', DupeStandardID: 1}, {Name: 'test item 2', DupeStandardID: 2}]);
    self.UnassignedDupeStandards = ko.observableArray([{Name: 'test item 3', DupeStandardID: 3}, {Name: 'test item 4', DupeStandardID: 4}]);
    self.Users = ko.observableArray([
    		{
          DupeStandards: ko.observableArray([{DupeStandardID: 2}]),
          RemoveStandard: function(){ console.log('removed');},
          AddStandard: function(){console.log('added');}
        }
    ]);

    self.onStart = function (data) {
        var currentDate = new Date();
        var datetime = currentDate.getHours() + ":"
            + currentDate.getMinutes() + ":"
            + currentDate.getSeconds();

        console.log('dragStart - ' + datetime);
    }

    self.onEnd = function (data) {
        var currentDate = new Date();
        var datetime = currentDate.getHours() + ":"
            + currentDate.getMinutes() + ":"
            + currentDate.getSeconds();

        console.log('dragEnd - ' + datetime);
    }

    self.DropAssignedStandard = function (droppedStandard) {
        self.UnassignedDupeStandards.push(droppedStandard);

        var user = ko.utils.arrayFirst(self.Users(),
            function (user) {
                return ko.utils.arrayFirst(user.DupeStandards(),
                    function (ds) {
                        return ds.DupeStandardID === droppedStandard.DupeStandardID;
                    });
            });
 
        if(user) user.RemoveStandard(droppedStandard);
    }

    self.DropUnassignedStandard = function (droppedStandard, arg2, arg3, arg4, arg5) {
        //arg2.AddStandard(droppedStandard);
        var user = ko.utils.arrayFirst(self.Users(),
            function (user) {
                return ko.utils.arrayFirst(user.DupeStandards(),
                    function (ds) {
                        return ds.DupeStandardID === droppedStandard.DupeStandardID;
    ...