Author: jmorliaguet
Date: Sun Mar 12 21:52:27 2006
New Revision: 2631
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_dragdrop_test.html
Log:
- began adding a "shift" drag-and-drop mode where elements of a certain type
get shifted upwards or downwards.
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 Sun Mar 12
21:52:27 2006
@@ -638,16 +638,23 @@
},
dragEvent: function(e) {
- var draggable = this._findDraggable(e);
+ var draggable = $(this._findDraggable(e));
if (!draggable) {
return false;
}
var pos = Position.cumulativeOffset(draggable);
+ var x = Event.pointerX(e);
+ var y = Event.pointerY(e);
this.x0 = pos[0];
this.y0 = pos[1];
- this.x1 = Event.pointerX(e) - this.x0;
- this.y1 = Event.pointerY(e) - this.y0;
+ if (this.def.dragging.shift) {
+ this.x1 = -5;
+ this.y1 = -5;
+ } else {
+ this.x1 = x - this.x0;
+ this.y1 = y - this.y0;
+ }
if (this.def.dragging.feedback) {
var dim = draggable.getDimensions();
@@ -673,12 +680,14 @@
document.getElementsByTagName('body')[0].appendChild(feedback);
this.moved = feedback;
} else {
- this.moved = draggable;
+ if (!this.def.dragging.shift) {
+ this.moved = draggable;
+ }
}
this.dragged = draggable;
this.moved.setStyle({'position': 'absolute'});
- this.moved.moveTo({'x': this.x0, 'y': this.y0});
+ this.moved.moveTo({'x': x-this.x1, 'y': y-this.y1});
Event.observe(document, "mousemove", this.moveEvent);
Event.observe(document, "mouseup", this.dropEvent);
@@ -700,6 +709,10 @@
var x = Event.pointerX(e);
var y = Event.pointerY(e);
this.moved.moveTo({'x': x-this.x1, 'y': y-this.y1});
+
+ var el = this;
+ el.style.border = "1px solid red";
+
Event.stop(e);
},
@@ -870,6 +883,7 @@
});
+
if (!CPSSkins.Canvas) {
CPSSkins.Canvas = {
_styles: {},
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
Sun Mar 12 21:52:27 2006
@@ -12,9 +12,12 @@
<link rel="stylesheet" href="../../cpsskins.css" type="text/css" />
<style stype="text/css">
+ body {
+ font: 12px verdana, sans-serif;
+ }
div.dragdrop {
background-color: #efc;
- border: 1px solid #999;
+ border: 1px solid #090;
padding: 1em;
margin: 10px;
}
@@ -27,7 +30,7 @@
}
#dragthis {
padding: 1em;
- border: 1px solid #fc0;
+ border: 1px solid #f90;
background-color: #ffc;
}
#movethis {
@@ -48,6 +51,12 @@
padding: 1em;
border: 1px solid #fc0;
}
+ .block {
+ border: 1px solid #000;
+ background-color: #ffc;
+ height: 25px;
+ padding: 3px;
+ }
</style>
</head>
@@ -55,13 +64,9 @@
<h1>CPSSkins: drag-and-drop</h1>
- <div style="width: 300px; float: left">
-
- <div class="dragdrop">DRAG-AND-DROP ME
- <div id="dragthis">DRAG ME</div>
- </div>
-
- <div class="drop">DROP ZONE</div>
+ <ins class="model">
+ {"id": "dummy"}
+ </ins>
<ins class="controller">
{"id": "dnd",
@@ -112,36 +117,66 @@
"highlight": {
"duration": 800
}
- }
- }
+ }}
</ins>
- <ins class="model">
- {"id": "dummy"}
+ <ins class="controller">
+ {"id": "dnd4",
+ "type": "drag-and-drop",
+ "action": "displayInfo",
+ "dragging": {
+ "sources": [".block"],
+ "shift": [".block"],
+ "feedback": {
+ "opacity": 0.7,
+ "border": "#000",
+ "background": "#fd9"
+ },
+ "revert": {
+ "duration": 800
+ }
+ }}
</ins>
- <ins class="view">
- {"id": "d1",
- "widget": {
- "template": "draggable.html"
- },
- "model": "dummy",
- "controllers": ["dnd", "dnd2", "dnd3"]
- }
- </ins>
+ <div style="width: 300px; float: left">
+ <div class="dragdrop">DRAG-AND-DROP ME
+ <div id="dragthis">DRAG ME</div>
+ </div>
+ <div class="drop">DROP ZONE</div>
+
+ <ins class="view">
+ {"id": "d1",
+ "widget": {
+ "template": "draggable.html"
+ },
+ "model": "dummy",
+ "controllers": ["dnd", "dnd2", "dnd3", "dnd4"]
+ }
+ </ins>
</div>
<div style="width: 200px; float: left">
-
- <div class="drop">DROP ZONE</div>
-
- <div id="drophere">DROP ME HERE</div>
-
- <div id="movethis">MOVE ME</div>
-
+ <div class="drop">DROP ZONE</div>
+ <div id="drophere">DROP ME HERE</div>
+ <div id="movethis">MOVE ME</div>
</div>
+ <div style="clear:both"></div>
+
+ <table style="width: 100%">
+ <tr>
+ <td style="width: 20%">
+ <div class="block">A</div>
+ </td>
+ <td style="width: 60%">
+ <div class="block">B</div>
+ </td>
+ <td style="width: 20%">
+ <div class="block">C</div>
+ </td>
+ </tr>
+ </table>
<script type="text/javascript">
function displayInfo(event) {
--
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins
