Drag and Drop ②
Dojo 0.2.2 で Drag and Drop する。(WebWork2.2.1を使用している)
dojo.provide("dojo.dnd.TableHtmlDropTarget"); dojo.require("dojo.dnd.HtmlDropTarget"); dojo.require("dojo.lang"); dojo.dnd.TableHtmlDropTarget = function(node, types){ this.domNode = node; dojo.dnd.DropTarget.call(this); this.acceptedTypes = types||[]; } dj_inherits(dojo.dnd.TableHtmlDropTarget, dojo.dnd.HtmlDropTarget); dojo.lang.extend(dojo.dnd.TableHtmlDropTarget, { onDragOver: function(e) { if (!dojo.lang.inArray(this.acceptedTypes, "*")) { // wildcard for (var i = 0; i < e.dragObjects.length; i++) { if (!dojo.lang.inArray(this.acceptedTypes, e.dragObjects[i].type)) { return false; } } } return true; }, onDragMove: function(e) {}, onDragOut: function (e) {}, onDrop: function(e) { return // Drag and Drop にて持ってきたオブジェクトを指定の場所に配置する処理を書く // e.originalTarget で持ってきたオブジェクトが取得できる // 追記 e.dropTarget がDorp先のオブジェクト } }); dojo.require("dojo.event.*"); dojo.require("dojo.dnd.*"); // 下記でDrag and Dropで配置可能な場所を設定する // 複数指定も可能のようです new dojo.dnd.HtmlDragSource(配置可能な場所のElement, "worker"); // 下記でDrag and Dropする対象のタグを指定する // 複数指定も可能のようです new dojo.dnd.TableHtmlDropTarget(対象のElement, ["worker"]); // 上記 worker は type の指定。ので DragSource, DropTargetともに同じ値を指定する // ようです。
とりあえずこんな感じでうごくはず。
※、TableHtmlDropTargetは試した時に、Tableを使ってたからTableの名前をつけただけです。