Author: jmorliaguet
Date: Mon Feb 20 23:25:32 2006
New Revision: 2437
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_dragdrop_test.html
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/draggable.html
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/tests.html
Log:
- there are two ways to register draggable elements:
- through css selectors ("draggable": ["div.drag", ...])
- explicitly by associating a drag-and-drop controller to a view
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 Mon Feb 20
23:25:32 2006
@@ -212,6 +212,7 @@
var factory = CPSSkins.Controllers[controller_type];
if (factory) {
var controller = factory(el, def);
+ controller.setup();
CPSSkins._controllers[name] = controller;
CPSSkins.notify("registered controller " + def.id,
{'publisher': controller});
@@ -381,6 +382,10 @@
this.def = def;
},
+ setup: function() {
+ /* to override */
+ },
+
register: function(view) {
/* to override */
}
@@ -532,18 +537,28 @@
CPSSkins.DragAndDropController.prototype = Object.extend(
new CPSSkins.Controller(), {
- register: function(view) {
- var widget = view.widget;
-
+ setup: function() {
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);
+ });
+
+ });
+ },
+
+ register: function(view) {
+ var widget = view.widget;
Event.observe(widget, "mousedown", this.dragEvent);
},
dragEvent: function(e) {
- var widget = this.view.widget;
- var pos = Position.page(widget);
+ this.moved = Event.element(e);
+ var pos = Position.page(this.moved);
this.x0 = Event.pointerX(e) - pos[0];
this.y0 = Event.pointerY(e) - pos[1];
Event.observe(document, "mousemove", this.moveEvent);
@@ -551,14 +566,12 @@
},
moveEvent: function(e) {
- var widget = this.view.widget;
var mouseX = Event.pointerX(e);
var mouseY = Event.pointerY(e);
- CPSSkins.Canvas.moveTo(widget, mouseX-this.x0, mouseY-this.y0);
+ CPSSkins.Canvas.moveTo(this.moved, mouseX-this.x0, mouseY-this.y0);
},
dropEvent: function(e) {
- var widget = this.view.widget;
Event.stopObserving(document, "mousemove", this.moveEvent);
Event.stopObserving(document, "mouseup", this.dropEvent);
}
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
Mon Feb 20 23:25:32 2006
@@ -12,6 +12,12 @@
<link rel="stylesheet" href="../../cpsskins.css" type="text/css" />
<style stype="text/css">
+ div.drag {
+ background-color: #ddc;
+ border: 1px solid #999;
+ padding: 1em;
+ width: 200px;
+ }
</style>
</head>
@@ -19,9 +25,16 @@
<h1>CPSSkins: drag-and-drop</h1>
+ <div class="drag">DRAG ME</div>
+
+ <div class="drag">DRAG ME</div>
+
+ <div id="dragthis">DRAG ME</div>
+
<ins class="controller">
{"id": "dnd",
"type": "drag-and-drop",
+ "draggable": ["div.drag", "#dragthis"],
"action": "displayInfo"
}
</ins>
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/draggable.html
==============================================================================
---
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/draggable.html
(original)
+++
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/draggable.html
Mon Feb 20 23:25:32 2006
@@ -1,5 +1,5 @@
-<div style="border: 1px solid #ccc; padding: 1em; position: absolute;
+<div style="border: 1px solid #999; padding: 1em; position: absolute;
background-color: #ffc; width: 300px">
DRAG ME
</div>
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/tests.html
==============================================================================
--- cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/tests.html
(original)
+++ cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/tests.html
Mon Feb 20 23:25:32 2006
@@ -40,4 +40,8 @@
<a target="main"
href="behaviour/cpsskins_behaviour_test.html">Behaviour</a>
</li>
+ <li>
+ <a target="main"
+ href="cpsskins_dragdrop_test.html">Drag and drop</a>
+ </li>
</ul>
--
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins
