JavaScript + Ajax 実践サンプル集 - フォルダーツリーをドラッグ＆ドロップして移動

フォルダーツリーをドラッグ＆ドロップして移動　《プログラマーがネットで副収入を得る方法とは》

説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのDraggable(), Droppable()プラグインを利用してツリービューのノードを移動します。ツリービューのノードをドラッグしたら別のノードに移動してみてください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery - Droppable </title>
  <link href="jQuery/draggableDroppable/style.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/draggableDroppable/jquery-1.1.2.js" type="text/javascript"></script>
  <script src="jQuery/draggableDroppable/interface.js" type="text/javascript"></script>
  <script src="jQuery/draggableDroppable/treeview.js" type="text/javascript"></script>
  <script type="text/javascript">
    //    $(function() {
    //    });
  </script>

</head>
<body>

<ul class="myTree">
    <li class="treeItem">
      <img src="jQuery/draggableDroppable/images/folder.png" class="folderImage" />
      <span class="textHolder">Folder 1</span>
      <ul>
        <li class="treeItem">
          <img src="jQuery/draggableDroppable/images/folder.png" class="folderImage" />
          <span class="textHolder">Subfolder 1 1</span>
        </li>
        <li class="treeItem">
          <img src="jQuery/draggableDroppable/images/folder.png" class="folderImage" />
          <span class="textHolder">Subfolder 1 2</span>
          <ul style="display: none;">
            <li class="treeItem">
              <img src="jQuery/draggableDroppable/images/folder.png" class="folderImage" />
              <span class="textHolder">Subfolder 1 2 1</span>
            </li>
            <li class="treeItem">
              <img src="jQuery/draggableDroppable/images/folder.png" class="folderImage" />
              <span class="textHolder">Subfolder 1 2 2</span>
            </li>
            <li class="treeItem">
              <img src="jQuery/draggableDroppable/images/folder.png" class="folderImage" />
              <span class="textHolder">Subfolder 1 2 3</span>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="treeItem">
      <img src="jQuery/draggableDroppable/images/folder.png" class="folderImage" />
      <span class="textHolder">Folder 2</span>
      <ul>
        <li class="treeItem">
          <img src="jQuery/draggableDroppable/images/folder.png" class="folderImage" />
          <span class="textHolder">Subfolder 2 1</span>
        </li>
        <li class="treeItem">
          <img src="jQuery/draggableDroppable/images/folder.png" class="folderImage" />
          <span class="textHolder">Subfolder 2 2</span>
        </li>
      </ul>
    </li>
  </ul>
  
</body>
</html>

外部スクリプトCSS部HEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
$(function() {
	  tree = $('#myTree');
	  $('li', tree.get(0)).each(
			function() {
			  subbranch = $('ul', this);
			  if (subbranch.size() > 0) {
			    if (subbranch.eq(0).css('display') == 'none') {
			      $(this).prepend('<img src="jQuery/draggableDroppable/images/bullet_toggle_plus.png" width="16" height="16" class="expandImage" />');
			    } else {
			    $(this).prepend('<img src="jQuery/draggableDroppable/images/bullet_toggle_minus.png" width="16" height="16" class="expandImage" />');
			    }
			  } else {
			  $(this).prepend('<img src="jQuery/draggableDroppable/images/spacer.gif" width="16" height="16" class="expandImage" />');
			  }
			}
		);
	  $('img.expandImage', tree.get(0)).click(
			function() {
			  if (this.src.indexOf('spacer') == -1) {
			    subbranch = $('ul', this.parentNode).eq(0);
			    if (subbranch.css('display') == 'none') {
			      subbranch.show();
			      this.src = 'jQuery/draggableDroppable/images/bullet_toggle_minus.png';
			    } else {
			      subbranch.hide();
			      this.src = 'jQuery/draggableDroppable/images/bullet_toggle_plus.png';
			    }
			  }
			}
		);
	  $('span.textHolder').Droppable(
			{
			  accept: 'treeItem',
			  hoverclass: 'dropOver',
			  activeclass: 'fakeClass',
			  tollerance: 'pointer',
			  onhover: function(dragged) {
			    if (!this.expanded) {
			      subbranches = $('ul', this.parentNode);
			      if (subbranches.size() > 0) {
			        subbranch = subbranches.eq(0);
			        this.expanded = true;
			        if (subbranch.css('display') == 'none') {
			          var targetBranch = subbranch.get(0);
			          this.expanderTime = window.setTimeout(
									function() {
									  $(targetBranch).show();
									  $('img.expandImage', targetBranch.parentNode).eq(0).attr('src', 'jQuery/draggableDroppable/images/bullet_toggle_minus.png');
									  $.recallDroppables();
									},
									500
								);
			        }
			      }
			    }
			  },
			  onout: function() {
			    if (this.expanderTime) {
			      window.clearTimeout(this.expanderTime);
			      this.expanded = false;
			    }
			  },
			  ondrop: function(dropped) {
			    if (this.parentNode == dropped)
			      return;
			    if (this.expanderTime) {
			      window.clearTimeout(this.expanderTime);
			      this.expanded = false;
			    }
			    subbranch = $('ul', this.parentNode);
			    if (subbranch.size() == 0) {
			      $(this).after('<ul></ul>');
			      subbranch = $('ul', this.parentNode);
			    }
			    oldParent = dropped.parentNode;
			    subbranch.eq(0).append(dropped);
			    oldBranches = $('li', oldParent);
			    if (oldBranches.size() == 0) {
			      $('img.expandImage', oldParent.parentNode).src('jQuery/draggableDroppable/images/spacer.gif');
			      $(oldParent).remove();
			    }
			    expander = $('img.expandImage', this.parentNode);
			    if (expander.get(0).src.indexOf('spacer') > -1)
			      expander.get(0).src = 'jQuery/draggableDroppable/images/bullet_toggle_minus.png';
			  }
			}
		);
	  $('li.treeItem').Draggable(
			{
			  revert: true,
			  autoSize: true,
			  ghosting: true/*,
				onStop		: function()
				{
					$('span.textHolder').each(
						function()
						{
							this.expanded = false;
						}
					);
				}*/
			}
		);
	}
);

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
body
{
  background: #fff;
  height: 100%;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 11px;
  min-height: 600px;
}
.myTree, .myTree ul
{
  list-style: none;
  padding-left: 22px;
}
.expandImage
{
  margin-right: 4px;
}
.folderImage
{
}
.textHolder
{
  height: 16px;
  line-height: 16px;
  padding-left: 6px;
}
span.dropOver
{
  background-color: #00c;
  color: #fff;
  height: 16px;
  line-height: 16px;
  padding-left: 6px;
}
.treeItem
{
  list-style: none;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
  <link href="jQuery/draggableDroppable/style.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/draggableDroppable/jquery-1.1.2.js" type="text/javascript"></script>
  <script src="jQuery/draggableDroppable/interface.js" type="text/javascript"></script>
  <script src="jQuery/draggableDroppable/treeview.js" type="text/javascript"></script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
  <ul class="myTree">
    <li class="treeItem">
      <img src="jQuery/draggableDroppable/images/folder.png" class="folderImage" />
      <span class="textHolder">Folder 1</span>
      <ul>
        <li class="treeItem">
          <img src="jQuery/draggableDroppable/images/folder.png" class="folderImage" />
          <span class="textHolder">Subfolder 1 1</span>
        </li>
        <li class="treeItem">
          <img src="jQuery/draggableDroppable/images/folder.png" class="folderImage" />
          <span class="textHolder">Subfolder 1 2</span>
          <ul style="display: none;">
            <li class="treeItem">
              <img src="jQuery/draggableDroppable/images/folder.png" class="folderImage" />
              <span class="textHolder">Subfolder 1 2 1</span>
            </li>
            <li class="treeItem">
              <img src="jQuery/draggableDroppable/images/folder.png" class="folderImage" />
              <span class="textHolder">Subfolder 1 2 2</span>
            </li>
            <li class="treeItem">
              <img src="jQuery/draggableDroppable/images/folder.png" class="folderImage" />
              <span class="textHolder">Subfolder 1 2 3</span>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="treeItem">
      <img src="jQuery/draggableDroppable/images/folder.png" class="folderImage" />
      <span class="textHolder">Folder 2</span>
      <ul>
        <li class="treeItem">
          <img src="jQuery/draggableDroppable/images/folder.png" class="folderImage" />
          <span class="textHolder">Subfolder 2 1</span>
        </li>
        <li class="treeItem">
          <img src="jQuery/draggableDroppable/images/folder.png" class="folderImage" />
          <span class="textHolder">Subfolder 2 2</span>
        </li>
      </ul>
    </li>
  </ul>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

フォルダーツリーをドラッグ＆ドロップして移動　《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

フォルダーツリーをドラッグ＆ドロップして移動 《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

フォルダーツリーをドラッグ＆ドロップして移動　《プログラマーがネットで副収入を得る方法とは》