OSS で利用できる機能

ツリー - ドラッグアンドドロップ - 単一のツリー

このサンプルでは、igTree の間でノードをドラッグアンドドロップする方法を紹介します。

ファイルマネージャー

ゴミ箱

このサンプルは、より大きい画面サイズのためにデザインされました。

モバイルデバイスで画面を回転、フルサイズ表示、またはその他のデバイスにメールで送信します。

コードビュー

JsFiddle で表示

クリップボードへコピー

HTML
データ

                    <!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <!-- Sample CSS -->
    <style type="text/css">

        .clear {
            clear: both;
        }

        #trash {
			margin-top: 10px;
            height: 150px;
            padding: 1%;
        }

            #trash h4 {
                line-height: 16px;
                margin: 0 0 0.4em;
            }

                #trash h4 .ui-icon {
                    float: left;
                }

        .containerTree {
			margin-top: 10px;
            overflow: auto;
        }

        #tree {
            width: 330px;
        }

        #left {
            margin-right: 150px;
        }

        #right {
            width: 150px;
            float: right;
        }

        .containerModalDialog {
            overflow: auto;
            width: 180px;
            margin: 0 auto;
            padding-top: 5px;
			height: 35px;
        }

        #leftYes {
            float: left;
        }

        #rightNo {
            float: right;
        }

        @media screen and (max-width: 500px) {
            #right {
                float: none;
            }
    		#trash { 
				margin-bottom: 10px;
    		}
    		.containerModalDialog { 
				width: 160px;
    		}
    		.containerModalDialog #leftYes, .containerModalDialog #rightNo { width: 70px; }
    		#yesModalDialog, #noModalDialog { width: 65px!important; }
        }
    </style>

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>

</head>
<body>
	<h2>ファイル マネージャー</h2>
    <div class="containerTree">
        <div id="right">
            <div id="trash" class="ui-widget-content ui-state-default">
                <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash"></span>ゴミ箱</h4>
            </div>
        </div>
        <div id="left">
            <!--igTree target element-->
            <div id="tree">
            </div>

            <!--igDialog target element-->
            <div id="modalDialog">
                <div class="containerModalDialog">
                    <div id="leftYes">
                        <button id="yesModalDialog">
                        </button>
                    </div>

                    <div id="rightNo">
                        <button id="noModalDialog">
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/data-files/hierarchical-files.js"></script>

    <script>

        $(function () {            

            var deletedNode,
				helperText;

            // Initialize the igDialog
            $("#modalDialog").igDialog({
                imageClass: "ui-icon ui-icon-alert",
                state: "closed",
                modal: true,
                draggable: false,
                resizable: false
            });

            // Initialize buttons for the Modal igDialog with igButton
            $("#yesModalDialog").igButton({ labelText: "はい", width: 80 });
            $("#noModalDialog").igButton({ labelText: "いいえ", width: 80 });

            $("#yesModalDialog").on("click", function (e) {
                if (helperText) {
                    var node = $("#tree").igTree("findNodesByText", helperText);
                    if (node.length > 0) {
                        $("#tree").igTree("removeAt", node[0].path);
                        $("#tree").igTree("addNode", node[0].data, deletedNode[0].element);
                        helperText = "";
                    }
                }
                // Close the Modal igDialog
                $("#modalDialog").igDialog("close");
            });

            $("#noModalDialog").on("click", function (e) {
                // Close the Modal igDialog
                $("#modalDialog").igDialog("close");
            });

            // Initialize the igTree
            $("#tree").igTree({
                checkboxMode: "triState",
                singleBranchExpand: true,
                dataSource: files,
                dataSourceType: "json",
                initialExpandDepth: 0,
                pathSeparator: ".",
                bindings: {
                    textKey: "Text",
                    valueKey: "Value",
                    imageUrlKey: "ImageUrl",
                    childDataProperty: "Folder"
                },
                // Enable Drag-and-drop feature
                dragAndDrop: true,
                dragAndDropSettings: {
                    dragAndDropMode: "move",
                    customDropValidation: function (element) {
                        // Validates the drop target
                        var droppableNode = $(this),
							draggableNode = $(element),
                            listContainer = droppableNode.closest("ul");

                        if (draggableNode.attr("data-path") == "0") {
                            return false;
                        }

                        deletedNode = $("#tree").igTree("findNodesByText", "削除済み");
                        if (deletedNode.length > 0) {
                            var nodePathArray = draggableNode.attr("data-path").split(".");
                            var deletedNodePathArray = deletedNode[0].path.split(".");
                            if (nodePathArray[0] == deletedNodePathArray[0] &&
								nodePathArray[1] == deletedNodePathArray[1]) {
                                return false;
                            }
                        }

                        if (droppableNode.is('a') && droppableNode.closest('li[data-role=node]').attr('data-value') === 'File') {
                            return false;
                        }
                        
                        if (!droppableNode.is('a') && listContainer.length && listContainer.attr("data-depth") === "0") {
                            return false;
                        }

                        return true;
                    }
                }
            });

            $("#trash").droppable({
                tolerance: "pointer",
                activeClass: "ui-state-highlight",
                accept: function (element) {
                    var path = $(element).attr("data-path");

                    if (path == "0") {
                        return false;
                    }

                    deletedNode = $("#tree").igTree("findNodesByText", "削除済み");
                    if (deletedNode.length > 0) {
                        var nodePathArray = path.split(".");
                        var DeletedNodePathArray = deletedNode[0].path.split(".");
                        if (nodePathArray[0] == DeletedNodePathArray[0] &&
                            nodePathArray[1] == DeletedNodePathArray[1]) {
                            return false;
                        }
                    }

                    return true;
                },
                over: function (event, ui) {
                    markup = $(ui.helper.html());
                    markup.find("span").removeClass("ui-icon-cancel").addClass("ui-icon-trash").siblings("strong");
                    ui.helper.
						removeClass("ui-widget ui-igtree-dropindicator ui-state-error ui-corner-all").
						addClass("ui-widget ui-igtree-dropindicator ui-state-highlight ui-corner-all").
						html(markup);
                },
                out: function (event, ui) {
                    markup = $(ui.helper.html());
                    markup.find("span").removeClass("ui-icon-trash").addClass("ui-icon-cancel").siblings("strong");

                    ui.helper.
						removeClass("ui-widget ui-igtree-dropindicator ui-state-highlight ui-corner-all").
						addClass("ui-widget ui-igtree-dropindicator ui-state-error ui-corner-all").
						html(markup);
                },
                drop: function (event, ui) {
                    helperText = ui.helper.text();
                    $("#modalDialog").igDialog("option", "headerText", "削除 - " + helperText);
                    $("#modalDialog").igDialog("open");
                }
            });

        });

    </script>

</body>
</html>

                    var files = [
    {
        Text: "コンピューター", Value: "Folder", ImageUrl: "../../images/samples/tree/computer.png", Folder: [
          {
              Text: "ミュージック", Value: "Folder", ImageUrl: "../../images/samples/tree/book.png", Folder: [
			  {
			      Text: "イングウェイ・マルムスティーン", Value: "Folder", ImageUrl: "../../images/samples/tree/book.png", Folder: [{
			          Text: "イングウェイ・マルムスティーン - Making Love", Value: "File", ImageUrl: "../../images/samples/tree/music.png", Folder: ""
			      }, { Text: "イングウェイ・マルムスティーン - Rising Force", Value: "File", ImageUrl: "../../images/samples/tree/music.png", Folder: "" },
				{ Text: "イングウェイ・マルムスティーン - Fire and Ice", Value: "File", ImageUrl: "../../images/samples/tree/music.png", Folder: "" }
			  	]
			  },
			  {
			      Text: "ホワイトスネーク", Value: "Folder", ImageUrl: "../../images/samples/tree/book.png", Folder: [
				  { Text: "ホワイトスネーク - Trouble", Value: "File", ImageUrl: "../../images/samples/tree/music.png", Folder: "" },
				  { Text: "ホワイトスネーク - Bad Boys", Value: "File", ImageUrl: "../../images/samples/tree/music.png", Folder: "" },
				  { Text: "ホワイトスネーク - Is This Love", Value: "File", ImageUrl: "../../images/samples/tree/music.png", Folder: "" }
			  	]
			  },
			  {
			  	Text: "AC/DC", Value: "Folder", ImageUrl: "../../images/samples/tree/book.png", Folder: [
				  { Text: "AC/DC - ThunderStruck", Value: "File", ImageUrl: "../../images/samples/tree/music.png", Folder: "" },
				  { Text: "AC/DC - T.N.T.", Value: "File", ImageUrl: "../../images/samples/tree/music.png", Folder: "" },
				  { Text: "AC/DC - The Jack", Value: "File", ImageUrl: "../../images/samples/tree/music.png", Folder: "" }
			  	]
			  },
			  {
			      Text: "ロック", Value: "Folder", ImageUrl: "../../images/samples/tree/book.png", Folder: [{
			          Text: "ボン・ジョヴィ - It's My Life", Value: "File", ImageUrl: "../../images/samples/tree/music.png", Folder: ""
			  	}]
			  }]
          },
          {
              Text: "マイ ドキュメント", Value: "Folder", ImageUrl: "../../images/samples/tree/documents-folder.png", Folder: [
			  {
			  	Text: "2009", Value: "Folder", ImageUrl: "../../images/samples/tree/documents-folder.png", Folder: [
				  { Text: "月間レポート", Value: "File", ImageUrl: "../../images/samples/tree/documents.png", Folder: "" },
				  { Text: "年間レポート", Value: "File", ImageUrl: "../../images/samples/tree/documents.png", Folder: "" }
			  	]
			  },
			  {
			  	Text: "2010", Value: "Folder", ImageUrl: "../../images/samples/tree/documents-folder.png", Folder: [
				  { Text: "月間レポート", Value: "File", ImageUrl: "../../images/samples/tree/documents.png", Folder: "" },
				  { Text: "年間レポート", Value: "File", ImageUrl: "../../images/samples/tree/documents.png", Folder: "" }
			  	]
			  }]
          },
          {
              Text: "ピクチャ", Value: "Folder", ImageUrl: "../../images/samples/tree/coins.png", Folder: [
			  {
			      Text: "2009 年 バースデー", Value: "Folder", ImageUrl: "../../images/samples/tree/coins.png", Folder: [
				  { Text: "ピクチャ 1", Value: "File", ImageUrl: "../../images/samples/tree/coins_add.png", Folder: "" },
				  { Text: "ピクチャ 2", Value: "File", ImageUrl: "../../images/samples/tree/coins_add.png", Folder: "" },
				  { Text: "ピクチャ 3", Value: "File", ImageUrl: "../../images/samples/tree/coins_add.png", Folder: "" },
				  { Text: "ピクチャ 4", Value: "File", ImageUrl: "../../images/samples/tree/coins_add.png", Folder: "" }
			  	]
			  },
			  {
			      Text: "2010 年 バースデー", Value: "Folder", ImageUrl: "../../images/samples/tree/coins.png", Folder: [
				  { Text: "ピクチャ 1", Value: "File", ImageUrl: "../../images/samples/tree/coins_add.png", Folder: "" },
				  { Text: "ピクチャ 2", Value: "File", ImageUrl: "../../images/samples/tree/coins_add.png", Folder: "" },
				  { Text: "ピクチャ 3", Value: "File", ImageUrl: "../../images/samples/tree/coins_add.png", Folder: "" }
			  	]
			  }]
          },
          {
              Text: "ネットワーク", Value: "Folder", ImageUrl: "../../images/samples/tree/door.png", Folder: [
			  { Text: "アーカイブ", Value: "Folder", ImageUrl: "../../images/samples/tree/door_in.png", Folder: "" },
			  { Text: "バックアップ", Value: "Folder", ImageUrl: "../../images/samples/tree/door_in.png", Folder: "" },
			  { Text: "FTP", Value: "Folder", ImageUrl: "../../images/samples/tree/door_in.png", Folder: "" }
          	]
          },
          { Text: "削除済み", Value: "Folder", ImageUrl: "../../images/samples/tree/bin_empty.png", Folder: "" }
    	]
    }];

Ignite UI for jQuery | サンプル

検索結果

ツリー - ドラッグアンドドロップ - 単一のツリー

ファイルマネージャー

ゴミ箱

コードビュー

Ignite UI for jQuery | サンプル

検索結果

ツリー - ドラッグ アンド ドロップ - 単一のツリー

ファイル マネージャー

ゴミ箱

コード ビュー

ツリー - ドラッグアンドドロップ - 単一のツリー

ファイルマネージャー

コードビュー