| MVC Classic ウィジェット > Wijtree > カスタムドラッグ＆ドロップオプションの使用 |
wijtree ウィジェットでは、ドラッグ＆ドロッププロパティである allowDrag と allowDrop のカスタム動作の設定をサポートします。 このトピックでは、２つの wijtree 要素とゴミ箱要素を作成する手順について説明します。 wijtree 要素間およびゴミ箱要素へノードをドラッグすることができます。 Web サイト（http://demo.componentone.com/ASPNET/MVCExplorer/tree/CustomDragDrop）にアクセスし、MVC コントロールエクスプローラの Custom Drag and Drop > Tree サンプルのライブデモをご覧ください。
<body> タグ内に追加します。
| ソースビュー |
コードのコピー
|
|---|---|
<div>
<ul id="tree1">
<li><a><span>フォルダ 1</span></a>
<ul>
<li><a><span>フォルダ 1.1</span></a></li>
<li><a><span>フォルダ 1.2</span></a></li>
<li><a><span>フォルダ 1.3</span></a></li>
<li><a><span>フォルダ 1.4</span></a></li>
<li><a><span>フォルダ 1.5</span></a></li>
</ul>
</li>
<li><a href="#"><span>フォルダ 2</span></a>
<ul>
<li><a><span>フォルダ 2.1</span></a></li>
<li><a><span>フォルダ 2.2</span></a></li>
<li><a><span>フォルダ 2.3</span></a></li>
<li><a><span>フォルダ 2.4</span></a></li>
<li><a><span>フォルダ 2.5</span></a></li>
</ul>
</li>
<li><a href="#"><span>フォルダ 3</span></a>
<ul>
<li><a><span>フォルダ 3.1</span></a></li>
<li><a><span>フォルダ 3.2</span></a></li>
<li><a><span>フォルダ 3.3</span></a></li>
</ul>
</li>
</ul>
</div>
<div id="trash" class="ui-widget-content">
<h4 class="ui-widget-header">
<span class="ui-icon ui-icon-trash">Trash</span> ごみ箱</h4>
<ul>
</ul>
</div>
<div style="clear: both">
</div>
<p>
このツリーのクローンノードします：</p>
<div>
<ul id="tree2">
<li><a><span>フォルダ 4</span></a>
<ul>
<li><a><span>フォルダ 4.1</span></a></li>
<li><a><span>フォルダ 4.2</span></a></li>
<li><a><span>フォルダ 4.3</span></a></li>
<li><a><span>フォルダ 4.4</span></a></li>
<li><a><span>フォルダ 4.5</span></a></li>
</ul>
</li>
<li><a href="#"><span>フォルダ 5</span></a>
<ul>
<li><a><span>フォルダ 5.1</span></a></li>
<li><a><span>フォルダ 5.2</span></a></li>
<li><a><span>フォルダ 5.3</span></a></li>
<li><a><span>フォルダ 5.4</span></a></li>
<li><a><span>フォルダ 5.5</span></a></li>
</ul>
</li>
</ul>
</div>
|
|
| ソースビュー |
コードのコピー
|
|---|---|
<style>
#trash
{
float: right;
min-height: 12em;
padding: 1%;
width: 32%;
}
#trash ul
{
list-style: none;
}
#trash ul li
{
margin-bottom: 10px;
}
div.wijmo-wijtree
{
float: left;
}
.dropVisual
{
height: 1px;
font-size: 0px; /*IE 6 の問題を修正*/
background-color: Red;
}
</style>
|
|
| ソースビュー |
コードのコピー
|
|---|---|
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
var span = "<span class=\"ui-widget-content helperInner\">";
$("#tree1").wijtree({
allowDrop: false,
allowDrag: true,
dropVisual: function () {
return $("<div>").addClass("dropVisual");
},
appendTo: 'body',
draggable: {
revert: "invalid",
start: function (event, ui) {
ui.helper.html(ui.helper.html() + span);
},
drag: function (event, ui) {
var inner = ui.helper.children(".helperInner");
if (inner.length) {
inner.html("x:" + event.pageX + " y:" + event.pageX);
}
},
stop: function (event, ui) {
$(this).hide()
$(this).show("highlight", 500);
}
}
});
var getInitMarkup = function (dragNode) {
var node = dragNode.clone();
node.find("a").unwrap().unwrap();
node.find("li>span,>span").remove();
return node;
};
$("#tree2").wijtree({
allowDrop: true,
allowDrag: false,
droppable: {
drop: function (event, ui) {
var dragNode = ui.draggable,
p = ui.newParent,
po = ui.newIndex, node;
node = getInitMarkup(dragNode);
if (p.is(":wijmo-wijtree")) {
p.wijtree("add", node, po);
}
else {
p.wijtreenode("add", node, po);
}
}
}
});
$("#trash").droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
scope: "tree",
// 受け入れる："li",
drop: function (event, ui) {
var node = ui.draggable;
delTreeNode(node, this);
}
});
var delTreeNode = function (node, trash) {
var parent = node.parent()
.closest(":wijmo-wijtreenode,:wijmo-wijtree");
if (parent.is(":wijmo-wijtreenode")) {
parent.wijtreenode("remove", node);
}
else {
parent.wijtree("remove", node);
}
node.appendTo($(trash).children("ul:eq(0)"));
}
});
</script>
|
|