在单个observableArray中获取afterMove arg上目标数据中的直接父元素

Question

我有一个嵌套的可观察数组，我正在对其应用sortable。我将一个项目从一个嵌套元素中拖放到另一个嵌套元素中。

项目移动后，如何获取源节点和目标节点的直接父节点。

如果我将第11项移动到第16项，则在移动之后，我希望源和目标父节点分别为10和15。

​

		function itemAfterMove(args){
			console.log("move");
		}
	
		ko.bindingHandlers.typeahead = {
			init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

				var $element = $(element);
				var allBindings = allBindingsAccessor();
				//var value = ko.utils.unwrapObservable(allBindings.value);
				var source = ko.utils.unwrapObservable(valueAccessor());
				var items = ko.utils.unwrapObservable(allBindings.items) || 4;

				var valueChange = function (item) {
					//console.log('item = ' + item);
					return item;
				};

				var highlighter = function (item) {
					var matchSpan = '<span style="color: blue;font-weight:bold">';
					var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&');
					return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
						return matchSpan + match + '</span>';
					});
				};

				var options = {
					source: source,
					items: items,
					updater: valueChange
				};

				$element
					.attr('autocomplete', 'off')
					.typeahead(options);
			}
		};

		var counter = 1;
		var fireCount = 1;

		var data = ['Iron Man', 'Iron Man 2', 'Iron Man 3', 'Avengers',
			'LOTR: The Fellowship of the Ring',
			'LOTR: The Two Towers',
			'LOTR: The Return of the Ring',
			'Star Wars I: Phantom Menace',
			'Star Wars II: Attack of the Clones',
			'Star Wars III: Revenge of the Sith',
			'Star Wars IV: A New Hope',
			'Star Wars V: The Empire Strikes Back',
			'Star Wars VI: Return of the Jedi',
			'The Princess Bride',
			'Thor',
			'Captain America'
		];


		var movies = ko.observableArray(data);

		var ListItem = function (name, items = []) {

			return {

				isActive: ko.observable(false),
				name: ko.observable(name),
				items: ko.observableArray(items)
			}
		}

		var items = [  
   {  
      "isActive":false,
      "name":1,
      "items":[  
         {  
            "isActive":false,
            "name":7,
            "items":[  
               {  
                  "isActive":false,
                  "name":8,
                  "items":[  
                     {  
                        "isActive":false,
                        "name":15,
                        "items":[  
                           {  
                              "isActive":false,
                              "name":16,
                              "items":[  

                              ]
                           }
                        ]
                     },
                     {  
                        "isActive":false,
                        "name":9,
                        "items":[  

                        ]
                     }
                  ]
               }
            ]
         }
      ]
   },
   {  
      "isActive":false,
      "name":2,
      "items":[  

      ]
   },
   {  
      "isActive":false,
      "name":3,
      "items":[  
         {  
            "isActive":false,
            "name":10,
            "items":[  
               {  
                  "isActive":false,
                  "name":11,
                  "items":[  
                     {  
                        "isActive":false,
                        "name":12,
                        "items":[  

                        ]
                     }
                  ]
               }
            ]
         }
      ]
   },
   {  
      "isActive":false,
      "name":4,
      "items":[  

      ]
   },
   {  
      "isActive":false,
      "name":5,
      "items":[  
         {  
            "isActive":false,
            "name":6,
            "items":[  
               {  
                  "isActive":false,
                  "name":14,
                  "items":[  

                  ]
               }
            ]
         },
         {  
            "isActive":false,
            "name":13,
            "items":[  

            ]
         }
      ]
   }
];
		items.push(new ListItem(counter++, []));
		items.push(new ListItem(counter++, []));
		items.push(new ListItem(counter++, []));
		items.push(new ListItem(counter++, []));
		items.push(new ListItem(counter++, [new ListItem(counter++, [])]));

		function MyViewModel() {
			var self = this;

			self.movies = movies;

			self.items = ko.observableArray(items);

			self.addChild = function (data) {
				//console.log("fired" + fireCount++);

				data.items.push(new ListItem(counter++, []));
			}

			self.addSibling = function (data, parent) {
				//console.log("fired" + fireCount++);

				data.items.push(new ListItem(counter++, []));
			}

			self.showStructure = function () {

				console.log(ko.toJS(self.items));
			}
		}

		$(document).ready(function () {
			ko.applyBindings(new MyViewModel());
		});

<html>

<head>
	<style type="text/css">
		.drag {
			display: inline-block;
			width: 20px;
			height: 20px;
			background-color: #e1e1e1;
			cursor: move;
		}

		.node {
			margin-bottom: 10px;
		}
	</style>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>


	<script type="text/javascript" src="http://knockoutjs.com/downloads/knockout-3.3.0.js"></script>
	<script type="text/javascript" src="https://rawgithub.com/rniemeyer/knockout-sortable/master/build/knockout-sortable.js"></script>
</head>

<body>
	<h3>Instructions</h3>

	<p>Drop <em>poo</em> out of baz</p>

	<button data-bind="click:showStructure">Console log Structure(latest)</button>
	<div data-bind="template: 'tree'"></div>

	<script type="text/htm" id="tree">
		<ul class="tree" data-bind="sortable : {
				data        : items,
				options     : {
					placeholder : 'drop-placeholder',
					delay       : 100,
					handle      : '.drag',
					scroll      : true
				}, afterMove: itemAfterMove
			}">
			<li class="node">
				<button data-bind="click:$root.addChild,clickBubble:false">Add Child</button>
				<button data-bind="click:$root.addSibling.bind($data,$parent),clickBubble:false">Add Sibling</button>
				<input type="text" data-bind="typeahead: $root.movies, value: name, items: 3" />
				<span class="drag"></span>
				<span data-bind="text: name"></span>
				<div data-bind="template: {name: 'tree', data: $data}"></div>

			</li>
		</ul>		
	</script>


</body>

​

Answer 1

您应该可以在afterMove函数中随时获得此信息。根据docs的说法

此函数接收其第一个参数的对象，该对象包含以下信息：

arg.item -正在移动的实际项目arg.sourceIndex -项目在原始observableArray arg.sourceParent中的位置-原始observableArray arg.sourceParentNode -原始列表的容器节点。如果在列表之间移动项目，但在单个数组中移动，则非常有用。回调中的值将是目标容器节点。arg.targetIndex -项目在目标observableArray arg.targetParent中的位置-目标observableArray