1 /** Licensed Materials - Property of IBM, 5724-E76 and 5724-E77, (C) Copyright IBM Corp. 2011, 2012 - All Rights reserved. **/ 2 (function() { 3 4 /** 5 * Support for frames 6 */ 7 var i$ = window.i$; 8 9 /** 10 * The global namespace of the IBM Client API 11 * @name i$ 12 * @namespace The global namespace of the IBM Client API 13 */ 14 15 // private 16 var preventDefault = function(e) { 17 if (!e) { 18 return false; 19 } 20 if (e.preventDefault) { 21 e.preventDefault(); 22 } else { 23 e.returnValue = false; 24 } 25 }, 26 27 // api 28 dnd = { 29 /** 30 * Creates a new dnd source based on the given data. 31 * @memberOf i$.dnd 32 * @function 33 * @param {Object} parameter parameter object 34 * @param {DOMNode} parameter.node The DomNode for the drag handler. 35 * @param {String} parameter.type The type of dnd data being transferred. 36 * @param {Object} parameter.data The data to transfer when dropped. 37 * @param {DOMNode} [parameter.avatar] The DomNode to use as the dnd avatar. 38 * @param {Object} [parameter.dragstart] function to invoke when dragstart is called. 39 * The following parameters will be passed: 40 * {Event} e The event. For example, you may use the event to set 41 * e.dataTransfer.effectAllowed = "copy"; 42 * {DOMNode} n The DomNode of the source area. 43 * @param {Object} [parameter.dragend] function to invoke when dragend is called. Same 44 * parameters as parameter.dragstart 45 */ 46 addSource: function(parameter) { 47 // node shortcut 48 var n = parameter.node; 49 50 // make draggable 51 n.setAttribute("draggable", "true"); 52 53 // start drag 54 i$.bindDomEvt(n, "dragstart", function(e) { 55 // set drag data 56 e.dataTransfer.setData(parameter.type, parameter.data); 57 58 // set drag image 59 if (parameter.avatar && e.dataTransfer.setDragImage) { 60 e.dataTransfer.setDragImage(parameter.avatar, 0, 0); 61 } 62 // invoke custom dragstart function 63 i$.isFunction(parameter.dragstart) && parameter.dragstart(e, n); 64 }); 65 66 // invoke custom dragend function 67 i$.isFunction(parameter.dragend) && i$.bindDomEvt(n, "dragend", function(e) { 68 parameter.dragend(e, n); 69 }); 70 }, 71 72 /** 73 * Creates a new dnd target based on the given data. 74 * @memberOf i$.dnd 75 * @function 76 * @param {Object} parameter parameter object 77 * @param {DOMNode} parameter.node. The DomNode to accept dnd source objects. 78 * @param {DOMNode} parameter.type. The type of dnd data being transferred. 79 * @param {Function} parameter.drop Function to handle the drop of data. 80 * The following parameters will be passed: 81 * {Event} e The drop event. 82 * {Node} n The DomNode of the target area. 83 * {String} type The type of data transfered. 84 * {Object} data The Object of data that was stored for that source. 85 * @param {Object} [parameter.dragenter] function to invoke when dragend is called. Same 86 * The following parameters will be passed: 87 * {Event} e The event. 88 * {Node} n The DomNode of the target area. 89 * @param {Object} [parameter.dragleave] function to invoke when dragend is called. Same 90 * parameters as parameter.dragenter 91 * @param {Object} [parameter.dragover] function to invoke when dragend is called. Same 92 * parameters as parameter.dragenter 93 */ 94 addTarget: function(parameter) { 95 // node shortcut 96 var n = parameter.node; 97 98 // bind event handler 99 i$.forEach(["dragover", "dragenter", "dragleave", "drop"], function(evt) { 100 i$.bindDomEvt(n, evt, evt === "drop" ? function(e) { 101 // invoke custom drop callback 102 var result = parameter.drop(e, n, parameter.type, e.dataTransfer.getData(parameter.type)); 103 preventDefault(e); 104 // TODO: cancel bubble here? 105 return !!result; 106 } : function(e) { 107 // invoke other custom callbacks 108 i$.isFunction(parameter[evt]) && parameter[evt](e, n); 109 preventDefault(e); 110 }); 111 }); 112 } 113 }; 114 115 // expose api 116 /** 117 * Entry point for creating sources and targets for drag and drop. 118 * @name i$.dnd 119 * @namespace Adds sources and targets for drag and drop. 120 */ 121 i$.dnd = dnd; 122 })(); 123