私は同じノードにノード項目をドラッグアンドドロップしようとしています。期待どおりに動作しています。しかし、それは1つのノードから別のノードに子アイテムをドラッグアンドドロップすることを可能にする。それは防ぐべきです。添付のスクリーンショットでKendoUI - Treeview：アイテムのドラッグアンドドロップを1つのノードから別のノードに防ぐ方法を教えてください。
。最後のステップは起こらないはずです。 サブアイテムをアイテムレベルに移動します。
問題を解決するためにサポートをお願いします。
ありがとうございます！
dropイベントでカスタムロジックを使用しないようにすることができます。 setValidメソッドを呼び出していない場合
drop: function(e) {
// Apply your own logic here
e.setValid(false);
}
は、あなただけの要素がここにdroppenすることができ、事前にかどうかを検証する必要がある、と。
追加情報はKendoUI docsにあります。
次のコードスニペットを試してください。
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/treeview/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<div class="box-col">
<h4>TreeView</h4>
<div kendo-tree-view="tree"
k-data-source="treeData"
drag-and-drop="true"
k-drag="onDrag"
k-on-change="selectedItem = dataItem"
k-on-drop="onDrop(kendoEvent)">
<span k-template>
{{dataItem.text}} <button class='k-button' ng-click='click(dataItem)'>Select</button>
</span>
</div>
</div>
<div class="box-col" ng-show="selectedItem">
<h4>Selected: {{selectedItem.text}}</h4>
<button class="k-button" ng-click="addAfter(selectedItem)">Add item below</button>
<button class="k-button" ng-click="addBelow(selectedItem)">Add child item</button>
<button class="k-button" ng-click="remove(selectedItem)">Delete</button>
</div>
</div>
<style>
.k-treeview .k-in {
padding: 5px;
}
</style>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.treeData = new kendo.data.HierarchicalDataSource({ data: [
{ id:1, text: "Item 1" },
{ id:2, text: "Item 2", items: [
{ id:1, text: "SubItem 2.1" },
{ id:2, text: "SubItem 2.2" }
] },
{ id:3, text: "Item 3" }
]});
$scope.click = function(dataItem) {
alert(dataItem.text);
};
function makeItem() {
var txt = kendo.toString(new Date(), "HH:mm:ss");
return { text: txt };
};
$scope.addAfter = function(item) {
var array = item.parent();
var index = array.indexOf(item);
var newItem = makeItem();
array.splice(index + 1, 0, newItem);
};
$scope.addBelow = function() {
// can't get this to work by just modifying the data source
// therefore we're using tree.append instead.
var newItem = makeItem();
$scope.tree.append(newItem, $scope.tree.select());
};
$scope.remove = function(item) {
var array = item.parent();
var index = array.indexOf(item);
array.splice(index, 1);
$scope.selectedItem = undefined;
};
$scope.onDrag = function(e) {
console.log("e.statusClass : " + e.statusClass);
if (e.statusClass.indexOf("add") >= 0) {
// deny the operation
e.setStatusClass("k-denied");
}
}
$scope.onDrop = function(e) {
if($scope.tree.parent(e.sourceNode).data('uid') != $scope.tree.parent(e.destinationNode).data('uid'))
{
e.preventDefault();
}
}
})
</script>
</body>
</html>
ご懸念があれば教えてください。
onDropではうまく動作しています。 onDrag関数で 'e.destinatonNode'を得ることはできません。 Bze、アイコンは誤解を招く。それは落とすことができますが、そうではありません。 [screenshot]（http://i.stack.imgur.com/VlPG1.png）を確認してください。 これに対処する方法はありますか？ –
私はあなたに知らせようとします。 –
私は試しましたが、解決策が見つかりませんでした。 –
回答ありがとうございます。 選択したアイテムノードを取得する方法はありますか？私は他のノードに対して検証することができます。 –
はい、 'drop-event'は' sourceNode'を公開し、私が間違っていなければ 'destinationNode'プロパティも公開します。 – Philipp