Author: jmorliaguet
Date: Tue Feb 21 00:09:05 2006
New Revision: 2438
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_dragdrop_test.html
Log:
- implemented drop zones. TODO handle the drop action.
Modified: cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
==============================================================================
--- cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js (original)
+++ cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js Tue Feb 21
00:09:05 2006
@@ -538,22 +538,23 @@
new CPSSkins.Controller(), {
setup: function() {
- this.dragEvent = this.dragEvent.bindAsEventListener(this);
+ var dragEvent = this.dragEvent = this.dragEvent.bindAsEventListener(this);
this.moveEvent = this.moveEvent.bindAsEventListener(this);
this.dropEvent = this.dropEvent.bindAsEventListener(this);
- var dragEvent = this.dragEvent;
$A(this.def.draggable || []).each(function(d) {
$A($$(d)).each(function(el) {
- Event.observe(el, "mousedown", dragEvent);
- });
+ Event.observe(el, "mousedown", dragEvent); });
+ });
+ var dropzones = this._dropzones = [];
+ $A(this.def.droppable || []).each(function(d) {
+ $$(d).each(function(el) { dropzones.push(el); });
});
},
register: function(view) {
- var widget = view.widget;
- Event.observe(widget, "mousedown", this.dragEvent);
+ Event.observe(view.widget, "mousedown", this.dragEvent);
},
dragEvent: function(e) {
@@ -574,6 +575,18 @@
dropEvent: function(e) {
Event.stopObserving(document, "mousemove", this.moveEvent);
Event.stopObserving(document, "mouseup", this.dropEvent);
+
+ var x = Event.pointerX(e);
+ var y = Event.pointerY(e);
+
+ var inTarget = false;
+ $A(this._dropzones).each(function(d) {
+ if (Position.within(d, x, y)) { inTarget = true; }
+ });
+
+ if (inTarget) {
+ /* TODO: handle action */
+ }
}
});
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_dragdrop_test.html
==============================================================================
---
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_dragdrop_test.html
(original)
+++
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_dragdrop_test.html
Tue Feb 21 00:09:05 2006
@@ -13,11 +13,17 @@
<style stype="text/css">
div.drag {
- background-color: #ddc;
+ background-color: #efc;
border: 1px solid #999;
padding: 1em;
width: 200px;
}
+ div.drop {
+ background-color: #ffe;
+ border: 1px solid #999;
+ padding: 2em;
+ width: 200px;
+ }
</style>
</head>
@@ -31,11 +37,14 @@
<div id="dragthis">DRAG ME</div>
+ <div class="drop">DROP ZONE</div>
+
<ins class="controller">
{"id": "dnd",
"type": "drag-and-drop",
+ "action": "displayInfo",
"draggable": ["div.drag", "#dragthis"],
- "action": "displayInfo"
+ "droppable": ["div.drop"]
}
</ins>
--
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins
